jQuery Validation validate all steps in a multi-part form - javascript

I'm made a multi-part registration form, using jQuery Validation.
My problem is that clicking the next button in the first fieldset,
validation works fine. In the next fieldset, the active fieldset
slid up and ignores the validation, this scenario is the same as others.
<script>
$(document).ready(function () {
// All required fields
var fields = [
{
package: 'required'
},
{
fname: 'required',
lname: 'required'
}
];
// Messages
var msgs = [
{
package: 'Please select your package.'
},
{
fname: 'Please enter your first name.',
lname: 'Please enter your last name.'
}
];
// Get the index of the active fieldset
var active = $('fieldset.active').index() - 1;
// I want only single method for the next button
$('.next').click(function () {
$('#register').validate({
ignore: [],
rules: fields[active],
messages: msgs[active]
}).form();
if ($('#register').valid()) {
// Set the current fieldset as inactive
$(this).parents('fieldset.active')
.slideUp()
.removeClass('active')
.next()
.slideDown()
.addClass('active');
}
});
// Not this
$('.next').eq(0).click(function () {
// same contents
});
$('.next').eq(1).click(function () {
// same contents
});
$('.next').eq(2).click(function () {
// same contents
});
// ...
});
</script>
<form id="register" method="post">
<fieldset class="active"> <!-- Set as active by default -->
<legend>Select your package</legend>
<select name="package">
<option value="" selected>Select</option>
<option value="basic">Basic</option>
<option value="pro">Pro</option>
<option value="premium">Premium</option>
<option value="elite">Elite</option>
</select>
<input type="button" class="next" value="Next" />
</fieldset>
<fieldset>
<legend>Your personal info</legend>
<ul>
<li>
<input type="text" name="fname" placeholder="First name" />
</li>
<li>
<input type="text" name="lname" placeholder="Last name" />
</li>
</ul>
</fieldset>
<!-- More fieldsets -->
</form>
I only want to validate per fieldset upon clicking the next button
Ideas will be greatly appreciated. Thanks!

Try this,
bootstrap-multi-step-registration-form.
View the page-source with ctrl+u for idea of the code.

Related

JQuery Validate Input on Button Toggle

I'm using Jquery Validate in my web form. I have an empty input, however the input is populated dynamically with text on the click of a button. Validation doesn't seem to work when I do this.
when the input is empty, on submit validation works (input turns red).
when input is populated dynamically, it stays red, it should turn green
My code is below and here's a fiddle;
In the fiddle, click submit when the input is empty, then toggle the button to No - the input should change to green without having to submit the form again.
HTML
<p>Does this item have an inventory number?</p>
<p>
<form id="myForm" method="post">
<input type="checkbox" class="input-large" value='1' name="btn" id="btn">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<input type="text" class="input-large" id="type" name="type" placeholder="Inventory Number">
</div>
</div>
</div>
<input type="submit" class="submit" value="Submit">
</form>
Jquery
$(function() {
$('#btn').bootstrapToggle({
on: 'No',
off: 'Yes',
onstyle: 'danger'
});
})
$("#myForm").validate({
rules: {
type: {
required: true,
minlength: 2
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
unhighlight: function(label) {
$(label).closest('.control-group').addClass('success');
},
});
$("#btn").on("change", function() {
if ($(this).prop('checked') == true) {
$("#type").attr("readonly", "true");
$("#type").val("Personal Item");
$("#type").rules("remove", "number minlength maxlength");
}
if ($(this).prop('checked') == false) {
$("#type").removeAttr("readonly");
$("#type").val("");
$("#type").rules("add", {
required: true,
minlength: 5,
maxlength: 6
});
}
});
You use some custom highlight and unhighlight on the control-group.
Just add this to the checked==true condition:
$("#type").closest('.control-group').removeClass("error").addClass("valid");
$("#type").next(".error").remove();
Since the rule is removed, it is not re-validated...
Your Fiddle updated.

Unable to validate bootstrap

I have the following jquery code
$().ready(function){
$("#Form").validate({
rules:{
DL:{
minlength:2
}
}
});
}
message:{
DL:{
minlength:"DL should be of at least 5";
}
}
The validation required is that the field DL should have length of 5.
The html code is below
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input
type="text" class="form-control" id="DL" required>
</div>
But the page does not seem to validate, after clicking a button, instead of showing message the page just scrolls upwards.
Here is your solution
https://jsfiddle.net/geradrum/far1fj1n/
All the code have syntax errors.
And the $() should be $(document)
The main problem is that the rules object looks for the element's name and you were using the id of the element.
index.html
<form id="FORM">
<div class="form-group">
<label for="exampleInputText">Driving License Number</label><input type="text" class="form-control" name="DL" required>
</div>
<input type="submit" value="Validate!">
</form>
app.js
$(document).ready(function(){
$( "#FORM" ).validate({
rules: {
DL: {
required: true,
minlength: 5
}
},
messages: {
DL: "DL should be of at least 5"
}
});
});

JQuery making new fields required

I have a form that allow the user to add additional email input fields. I wanted the make those new fields required. The original single email field functions as expected but not the new ones. I have have tried two approaches with no success.
HTML
<form action="/(S(e5sipzkzq4cbahmey3c2f0xs))/Import/PostEmail" id="EmailForm" method="post" > <fieldset>
<legend>EmailViewModel</legend>
<p>
<input type="email" name="EmailAddresses" value=" " class="email" required="required" />
<span class="btn_orange">x</span>
</p>
<p>
<span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span>
</p>
<p>
<span class="btn_orange"><a type="submit" id="SendEmail_Button">Send Email</a></span>
</p>
</fieldset>
</form>
Add new input:
$('.add_email_button').closest('p').click(function() {
var html = '<p><input type="email" required="required" name="EmailAddresses" /><span class="btn_orange">x</span></p>';
$(html).insertBefore($(this));
});
Approach 1:
$('body').on('click', 'span', function() {
$('input').each(function() {
$(this).attr('required', 'required');
});
});
Approach 2:
$('#SendEmail_Button').closest('span').click(function () {
$('input').each(function() {
$(this).attr('required', 'required');
});
$('#EmailForm').submit();
});
approach 3
$('#SendEmail_Button').closest('span').click(function() {
if ($('#EmailForm').valid()) {
$.post('#Url.Action("PostEmail")', $("#EmailForm").serialize());
history.go(-1);}
});
Try this and target the new input field added by the user in place of input (use a class, more specific).
$('body').on('focus', '.inputClass', function() {
$(this).attr('required', 'required');
});
http://jsfiddle.net/qa0ry2fk/3/

Trying to get jquery validator to work on specific button click

I am trying to get the jquery validator to run on the specific submit button not on all buttons.
<form id="incidentform" action="/emplincidata.php" method="get">
<input type="submit" class="button" name="updateincidentButton" value="Update Incident"/>
<input type="button" class="button" name="cancelincidentButton" value="Cancel Incident"/>
<br />
<div class="makescroll" id="bysuper">
<div class="incident">
<label class="title">TO BE COMPLETED BY THE SUPERVISOR</label><br />
<div>
<label class="eighth" for="incidate">Incident Date</label>
<input type="text" id="incidate" name="incidate" class="datepick" />
<label class="eighth" for="incidtime">Incident Time</label>
<input type="text" id="incidtime" name="incidtime" class="timeinput" />
<label class="eighth" for="shift">Shift</label>
<select id="shift" name="shift">
<option selected="selected"></option>
<option>Day</option>
<option>Evening</option>
<option>Night</option>
</select>
</div>
</div>
</div>
</form>
Here is the javascript. This code does not work when I have the submit catptured. I also tried click here and it failed.
$(function(){
$("#updateincidentButton").submit(function(){
$("form").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
})
})
You have not given Id selector to your submit button. so please give Id selector as below:
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
Please try as shown below:-
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
/* Bind Click() to Button*/
$("input[name=updateincidentButton]").click(function () {
if ($(#incidentform).valid()) {
// post stuffs
}
return false;
});
});
Try this:
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
},
submitHandler :function() {
// DO STUFF HERE WHEN EVERYTHING IS VALIDATED e.g submit form
alert('VALID');
}
})
});
Fiddle: http://jsfiddle.net/ZKge8/
Just scroll to the bottom of the page to skip the validate plugin script.

Jquery validation plugin and switching required field

Yup, basically, I am building a web form that need to provide different required form and validation function fallow by selected country.
I am using
<script type="text/javascript" src=" jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src=" jquery.validate.js" charset="utf-8"></script>
and here is my JS code
<script type="text/javascript" charset="utf-8">
function updatRequreForm (STATE,ZIPCODE) {
$("#frm_verification").validate({
rules: {
'form[country]' : "required",
'form[state]' : {required: STATE},
'form[zip]': {required: ZIPCODE},
},
messages: {
'form[country]' : "This field is required.",
'form[state]' : "This field is required.",
'form[zip]': "This field is required.",
});
};
function setRequreForm () {
var _cs = $('#country_select')[0];
if ('US' != _cs.value)
{
$('#state_star')[0].innerHTML = '';
$('#zip_star')[0].innerHTML = '';
updatRequreForm (false,false);
}
else
{
$('#state_star')[0].innerHTML = '*';
$('#zip_star')[0].innerHTML = '*';
updatRequreForm (true,true);
}
};
$(document).ready(function() {
setRequreForm ();
$('#country_select').change(function(){
setRequreForm ();
});
});
</script>
Here is my HTML:
<form id="frm_verification" action="some.php" method="POST">
<label for="country_select"><sup>*</sup>Country:</label>
<select name="form[country]" id="country_select">
<option value="">- Select -</option>
<option value="US" selected="selected">United States</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<label for="select-state"><sup id="state_star">*</sup>State/Province/Region:</label>
<span id="states_select">
<select id="select-state" name="form[state]">
<option value="">- Select -</option>
<option value="AK">Alaska</option>
</select>
</span>
<span id="states_text" style="display:none;">
<input type="text" name="form[state]" value="" id="state" />
</span>
<label for="zip_code"><sup id="zip_star">*</sup>ZIP/Postal Code:</label>
<input type="text" id="zip_code" name="form[zip]" value="" id="zip">
<input type="submit" value="Submit" id="submit_btn" class="submit">
</form>
Basically, what I need to create is:
1.When user select US on country selection, the State and Zip area become required.
2.When user select Zambia on country selection, the State and Zip area become non-required.
Problem:
When I first load the page and click the Submit button with empty field, the form successfully validate each fields and shows warning. However selecting of the Zambia, the validation is not working.
Guess:
I have removed “setRequreForm ();” on ready function like:
$(document).ready(function() {
//setRequreForm ();
$('#country_select').change(function(){
setRequreForm ();
});
});
And tried to select Zambia, and tried to validate the form and it works. So I think calling “validate()” twice causes error.
Well I stuck with this for a while. Please help me to figure this out, I will really appreciate that.
You can't call validate more than ones becouse you run validate plugin more than one and this lead to errors.
You can setup your validator like this:
$("#myform").validate({
ignore: ".ignore"
})
Ignore tells to validator: field which has ignore css class should not be validated.
When you change requirements then add to specified fields css class "ignore":
$("#field1").addClass("ignore");
otherwise remove this class:
$("#field2").removeClass("ignore");

Categories

Resources