Develop Reference

display one of two forms if button is clicked

I am in need of some help. I want to create a web page that has two buttons depending on which button is selected I want to display either form 1 or form 2. The next thing is if the user selects the button for form 1 I want to do form validation only for the selected form.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<button type="button" class="btn btn-outline-primary">show form 1</button>
<button type="button" class="btn btn-outline-primary">show form 2</button>
<br>
<form id="form1" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 1</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form1 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form1 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form1</button>
</form>
<br>
<form id="form2" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 2</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form2 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form2 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form2</button>
</form>

See if it fits your requirements.
I just added an event to the buttons that just flips the display property of the two forms.
For the validation, only the displayed form is validated, but once you validate a form it remains validated.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function toggle(i) {
let form1 = document.getElementById('form1');
let form2 = document.getElementById('form2');
if (i == 1) {
form1.style.display = 'none';
form2.style.display = 'block';
} else {
form1.style.display = 'block';
form2.style.display = 'none';
}
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<button type="button" id="btn1" class="btn btn-outline-primary" onclick="toggle(2)">show form 1</button>
<button type="button" class="btn btn-outline-primary" onclick="toggle(1)">show form 2</button>
<br><br>
<form id="form1" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 1</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form1 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form1 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form1</button>
</form>
<form id="form2" class="needs-validation" style="display:none" novalidate>
<hr>
<p>THIS IS FORM 2</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form2 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form2 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form2</button>
</form>
For this kind of things i recommend you to use some framework by the way, something like vuejs, or also jquery for simple things.

Jquery Valid() function only apply on 1st element

I am intend to use javascript to submit the form. Before I want to submit the form, I need to validate my form.
The following is my code :
alert("OP Please edit me to add the validation script code, cdn link or something. Add code that triggers the validation.");
function validateForm1() {
$("#addMapForm").validate();
$('#addMapForm').valid();
console.log($('#addMapForm').valid());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" required/>
</div>
</div>
</div>
</form>

You are missing names on the inputs. A form will only submit named controls and validation plugin won't validate anything without a name
The required fields work fine once you add them
$("#addMapForm").validate();
$("#addMapForm").valid();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input name="location" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input name="unit" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea name="address" class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input name="city" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input name="zip" class="form-control" required/>
</div>
</div>
</div>
<button>Submit</button>
</form>

I assume you are using this: https://jqueryvalidation.org/validate/
Have you implemented the rules of validation for other elements?
rules (default: rules are read from markup (classes, attributes, data))
So either you have those defined in HTML or you need to define them inside validate function called before you called .valid().
Here is an examle:
$("#myform").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
In short for more precise help we need all the relevant code or fiddle, plunker a demo showing the example of the problem you are facing.

Try this solution.
$('.form-control').each(function() {
$(this).validate();
$(this).valid();
}

I tried to use the following js to validate all my form, however i know the following code is not the best answer, it only able to show the error message on the first input element.
I am welcome to anyone to post better answer than this.
function validateForm() {
var result = true;
$("#addMapForm").each(function () {
$(this).find(':input').each(function () {
if ($(this).valid() == false) {
result = false;
return;
}
});
});
return result;
}

I gave your form inputs some name attributes. Not sure if you added the actual code to your page, so I did so here. I added a button to trigger just for a demo. I added the simplest bit of CSS.
$("#validateme").on('click', function() {
console.log("validating");
let Validator = $("#addMapForm").validate();
Validator.form();
console.log(Validator.valid());
});
.error { color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" name="location" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" name="address" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" name="zip" required />
</div>
</div>
</div>
<button id="validateme" type="button">Do validate</button>
</form>

How to call mutiple id using `this` in jquery

here I'm doing contact forms.In the same page, I have 10 forms and I want to validate all form.I want to use same validation code for all forms.here I gave id's but the problem is the same id's not working on the same page.I want to use current id.Can anyone suggest how should I do?
Feel free to tell is there any mistakes in my code.
Thanks
$(document).ready(function(){
/* name*/
$('#contact_name').on('input', function() {
var input=$(this);
var is_name=input.val();
if(is_name){
input.removeClass("invalid").addClass("valid");
}
else{
input.removeClass("valid").addClass("invalid");
}
});
/* E-mail */
$('#contact_email').on('input', function() {
var input=$(this);
var regex = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
var is_email=regex.test(input.val());
if(is_email){
input.removeClass("invalid").addClass("valid");
}
else{
input.removeClass("valid").addClass("invalid");
}
});
/* select People*/
$('#contact_select').change(function() {
var select=$(this);
var selectOption = $("#contact_select option:selected").val();
if(selectOption){
select.removeClass("invalid").addClass("valid");
}
else{
select.removeClass("valid").addClass("invalid");
}
});
/* select Time*/
$('#contact_time').change(function() {
var select=$(this);
var selectTime = $("#contact_time option:selected").val();
if(selectTime){
select.removeClass("invalid").addClass("valid");
}
else{
select.removeClass("valid").addClass("invalid");
}
});
/* Submit */
$("#contact_submit button").click(function(event){
var form_data = $("#contact").serializeArray();
var error_free = true;
for (var input in form_data){
var element = $("#contact_"+form_data[input]['name']);
var valid = element.hasClass("valid");
var error_element = $("span", element.parent());
if (!valid){
error_element.removeClass("error").addClass("error_show");
error_free=false;
}
else{
error_element.removeClass("error_show").addClass("error");
}
}
if (!error_free){
return false;
}
else {
$('.success_msg').fadeIn().delay(3000).fadeOut();
$('input , textarea , select').val('').removeClass('valid');
event.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row current" id="demo1">
<form id="contact" method="post" action="">
<div class="detail">
<input type="text" id="contact_name" name="name" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_name">Name</label>
<span class="error">This field is required</span>
</div><!--detail-->
<div class="detail">
<input type="text" id="contact_email" name="email" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_email">Email</label>
<span class="error">A valid email address is required</span>
</div><!--detail-->
<div class="btn-container" id="contact_submit">
<button type="submit" class="btn"> Submit</button>
</div>
</form>
</div>
<div class="row current" id="demo2">
<form id="contact" method="post" action="">
<div class="detail">
<input type="text" id="contact_name" name="name" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_name">Name</label>
<span class="error">This field is required</span>
</div><!--detail-->
<div class="detail">
<input type="text" id="contact_email" name="email" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_email">Email</label>
<span class="error">A valid email address is required</span>
</div><!--detail-->
<div class="btn-container" id="contact_submit">
<button type="submit" class="btn"> Submit</button>
</div>
</form>
</div>

It seems you are using HTML5, then adding custom methods for validation is not a good idea.
Try using jquery validation and pattern attribute like:
function submitForm(id){
var isValid = $("#" + id).valid();
if(isvalid)
/* Yes valid*/
else
/* Invalid*/
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<div class="row current" id="demo1">
<form id="contact1" method="post" action="">
<div class="detail">
<input type="text" id="contact_name" name="name" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_name">Name</label>
<span class="error">This field is required</span>
</div><!--detail-->
<div class="detail">
<input type="text" id="contact_email" name="email" required pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_email">Email</label>
<span class="error">A valid email address is required</span>
</div><!--detail-->
<div class="btn-container" id="contact_submit">
<button type="button" class="btn" onclick="submitForm('contact1')"> Submit</button>
</div>
</form>
</div>
<div class="row current" id="demo2">
<form id="contact2" method="post" action="">
<div class="detail">
<input type="text" id="contact_name" name="name" required autocomplete="off" />
<span class="inputBar"></span><!--inputBar-->
<label for="contact_name">Name</label>
<span class="error">This field is required</span>
</div><!--detail-->
<div class="detail">
<input type="text" id="contact_email" name="email" required autocomplete="off" pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$"/>
<span class="inputBar"></span><!--inputBar-->
<label for="contact_email">Email</label>
<span class="error">A valid email address is required</span>
</div><!--detail-->
<div class="btn-container" id="contact_submit">
<button type="button" onclick="submitForm('contact2')" class="btn"> Submit</button>
</div>
</form>
</div>
UPDATE:
Dynamic function called on button clicked. Type is button instead of submit
Hope you will get the point and it helps.
Happy Coding !!!!

You can use a custom attribute like data-validation="validation-type" on your input controls then do a for each on your form with
$('<myform>').find('*[data-validation]').each(function(){
// in here get the this object for each input control the code to validate comes here
var valType = $(this).attr('data-validation');
switch(valType)
{
case 1:
//validation of case 1
break;
//add other cases as of your need.
}
});
Edit 1
For example you can play around with this snippet:
var button = $("button")
// handle click and add class
button.on("click", function() {
//validating controls for form 1
debugger;
$('#myform1').find('*[data-validation]').each(function(e) {
validateInput(this);
});
//validating controls for form 2
$('#myform2').find('*[data-validation]').each(function(e) {
validateInput(this);
});
})
function validateInput(control) {
if (control == null || control === undefined)
return null;
var validType = $(control).attr('data-validation');
if (validType == null || validType === undefined)
return null;
switch (validType) {
case "text":
if ($(control).val().trim().length == 0)
$(control).addClass('invalid').removeClass('valid');
else
$(control).addClass('valid').removeClass('invalid');
break;
case "number":
debugger;
var value = $(control).val().trim();
if (isNaN(value) || value.length == 0)
$(control).addClass('invalid').removeClass('valid');
else
$(control).addClass('valid').removeClass('invalid');
break;
}
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.valid {
border: 2px solid green;
}
.invalid {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>
Form 1
</h4>
<form id="myform1">
<label>Enter name</label>
<input type="text" data-validation="text" value="">
<br/>
<label>Enter Age</label>
<input type="text" data-validation="number" value="">
<br/>
</form>
<h4>
Form 2
</h4>
<form id="myform2">
<label>Enter name</label>
<input type="text" data-validation="text" value="">
<br/>
<label>Enter Age</label>
<input type="text" data-validation="number" value="">
<br/>
</form>
<button>
Click me to validate
</button>

Disable form inputs by default. Enable them onClick of <a>. Disable onClick of different <a>

Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.
I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.
Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.
<div class="main">
<div class="container">
<section class="hgroup">
<h1>My Profile</h1>
<h2>View and edit your profile.</h2>
<ul class="breadcrumb pull-right">
<li>Dashboard </li>
<li class="active">Profile</li>
</ul>
</section>
<section>
<div class="row">
<div class="contact_form col-sm-12 col-md-12">
<form name="contact_form" id="contact_form" method="post">
<div class="row">
<div class="col-sm-4 col-md-4">
<label>First Name</label>
<input name="first_name" id="name" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Middle Name</label>
<input name="middle_name" id="email" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Last Name</label>
<input name="last_name" id="email" class="form-control" type="text" value="">
</div>
</div>
<div class="col-sm-12 col-md-12">
<br/>
<a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
<a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</form>
</div>
</div>
</section>
</div>
</div>

Add some selectors to link -
Edit Profile
Save Changes
Disable all the input fields -
$('input').attr('disabled', true);
Alter the attributes of input fields -
$('#edit_profile').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', false);
});
$('#save_button').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', true);
});
Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.
Working Demo

You also have two elements that have the id submit_btn, id's should be unique.
I would change them to be different and then try:
$("#edit_btn").on('click', function() {
$("input[type='text']").removeAttr('disabled');
});
Then to re-disable:
$("#submit_btn").on('click', function() {
$("input[type='text']").attr('disabled', 'disabled');
});
You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.
Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']

I would use jQuery. Here's an example.
html:
<form>
<p>Edit the form</p>
<input type="text" placeholder="one" disabled>
<input type="text" placeholder="two" disabled>
<input type="text" placeholder="three" disabled>
<div id="saveForm">Save Form</div>
<div id="editForm">Edit Form</div>
</form>
jQuery:
$("#editForm").click(function(){
$("p").show(0);
$("#saveForm").show(0);
$("form input").prop('disabled', false);
$(this).hide(0);
});
$("#saveForm").click(function(){
$("p").hide(0);
$("#editForm").show(0);
$("form input").prop('disabled', true);
$(this).hide(0);
});
CSS:
div,input{
padding: 10px;
display: block;
margin: 10px;
border-radius: 5px;
border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}
Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/

Jquery Slide Toggle : Slide Button with Panel

I am working on jquery slide tab and its working fine on button click. But I want that button stitch with panel and also should slide with panel. currently button is fix and panel working as expected.
Here Is FIDDLE
HTML
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu">
<div class="slide-out-div" style="z-index: 999;">
<form class="generalForm bookingForm" action="#" method="post">
<div class="row">
<div class="col-sm-12">
<label>Name<span>*</span></label>
<input type="text" name="Name" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Email <span>*</span></label>
<input type="text" name="Email" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Contact No <span>*</span></label>
<input type="text" name="contact_no" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Say Few Words<span>*</span></label>
<input type="text" name="feedback" class="required" />
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
</div>
</div>
</form>
</div>
</div>
</div>
CSS
.sidebarmenu{
position:absolute;
right:-250px;
z-index:999999;
}
JS
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
if(hidden){
$('.sidebarmenu').animate({
right: '-250px'
},500)
} else {
$('.sidebarmenu').animate({
right: '0px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});

As want to move button along with form, then you need add one parent and move that only instead form see demo
HTML
<div class="panel">
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu"> -- your code --</div>
</div>
JS
$('#showmenu').click(function () {
var hidden = $('.sidebarmenu').data('hidden');
if (hidden) {
$('.panel').animate({
marginRight: '-250px'
}, 500)
} else {
$('.panel').animate({
marginRight: '0px'
}, 500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});