for some reason having issues with JQuery validate even though I have used similar code previously. I have a simple form.
<form id="emailform" class="form-horizontal emailType" role="form">
<div class="form-group">
<label for="inputTitle" class="col-lg-4 control-label">Title</label>
<div class="col-lg-8">
<select class="form-control" id="inputTitle" name="inputTitle">
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)">
</div>
</div>
<div class="form-group">
<label for="inputSurname" class="col-lg-4 control-label">Surname</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputSurname" name="inputSurname" placeholder="Surname">
</div>
</div>
<div class="form-group">
<label for="inputMethod" class="col-lg-4 control-label">Delivery Method</label>
<div class="col-lg-8" id="radioAlign">
<input type="radio" value="email" id="inputMethod" checked><span id="emailText">Email</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
<div class="col-lg-8">
<select class="form-control" id="inputLinks" name="inputLinks">
<option value="img/default.jpg">Please select...</option>
<option value="img/placeholder.jpg">Email1</option>
<option value="img/placeholder2.jpg">Email2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">
Send Message
</button>
</div>
</div>
</form>
<div id="error"></div>
I then have my validation.
$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);
$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");
var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});
If I submit the form, my error message does not display. Instead, the input gets highlighted with a blue border.
Is there any reason my errors do not display?
Thanks
I have update your validation massage code;
Please check this,
$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);
$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");
var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
errorPlacement: function (label, element) { // render error placement for each input type
$('<span class="error"></span>').insertAfter(element).append(label)
var parent = $(element).parent('.input-with-icon');
parent.removeClass('success-control').addClass('error-control');
},
highlight: function (element) { // hightlight error inputs
var parent = $(element).parent();
parent.removeClass('success-control').addClass('error-control');
},
unhighlight: function (element) { // revert the change done by hightlight
var parent = $(element).parent();
parent.removeClass('error-control').addClass('success-control');
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});
does it work or not? let me know
Related
I am using the jquery validation plugin for my form validation and form is inside a modal, but it is not working. Does it work with modal? or there might be a problem with my code?
Here is my javascript:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters"
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
Here is my html form (I've already added a css for error label):
<script src="{{asset('js/jquery-2.0.0.min.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/form-validation.js')}}" type="text/javascript">
</script>
<script src="{{asset('js/jquery.validate.min.js')}}" type="text/javascript">
</script>
<form method="post" action="{{route('profile.update', ['id'=> Auth::id()])}}" enctype="multipart/form-data" id="gen_form">
{{csrf_field()}}
<h4 class="modal-title" id="myModalLabel"> <b>General Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" id="lname" name="lname" value="{{$user->lname}}" />
<br>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">First Name</label>
<input type="text" class="form-control" id="fname" name="fname" value="{{$user->fname}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group label-floating has-success">
<label class="control-label">Location</label>
<input type="text" class="form-control" name="location" value="{{$user->location}}" />
</div>
</div>
<h4 class="modal-title" id="myModalLabel"> <b>Contact Information</b></h4>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Contact Number</label>
<input type="text" class="form-control" id="contact_no" name="contact_no" value="{{$user->contact_no}}" />
<p class="validations">Hello</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group label-floating has-success">
<label class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" value="{{$user->email}}" />
<p class="validations">Hello</p>
</div>
</div>
Do anyone here have an idea what is going on?
Your script is invalid.
Perhaps try
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
}
});
});
and see if you have better luck?
I think, you have some syntax errors.
Try to do something like this:
$(document).ready(function(){
// validate the comment form when it is submitted
// $("#gen_form").validate();
// validate signup form on keyup and submit
$("#gen_form").validate({
rules: {
'fname' : {
letters: true,
maxlength: 10,
minlength:2
},
'lname' : {
letters: true,
maxlength: 10,
minlength:2
},
'email': {
email: true
},
},
messages: {
fname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
lname: {
maxlength: "Your last name must not consist more than 40 characters",
minlength: "Your last name must consist of at least 2 characters"
},
email: "Please enter a valid email address"
}
});
});
You are missing a closing curly bracket and a comma at the end of the rules section, right before messages:
[...]
'email': {
email: true
},
}, /* <--- This one */
messages: {
fname: {
[...]
I am trying to create form with jQuery validation and this is my form,
Then I am using this code to validate the inputs.
It's just plain and simple:
$('#forgot_pwd').validate({
debug: true,
rules: {
username: {
minlength: 6,
required: true,
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "Enter your Username"
},
email: {
required: "Enter your Email",
email: "Enter valid email address"
},
},
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');
},
highlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<div class="card">
<h4 class="l-login">Forgot Password</h4>
<div class="messagebox">
<div id="alert-message"></div>
</div>
<form class="col-md-12" id="forgot_pwd" method="POST">
<div class="form-group form-float">
<div class="form-line">
<input type="text" class="form-control" id="username" name="username">
<label class="form-label">Username</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<input type="email" class="form-control" id="email" name="email">
<label class="form-label">Email</label>
</div>
</div>
<button id="signin" type="submit" class="btn btn-raised waves-effect bg-red" data-loading-text="Loading...">Reset Password</button>
SIGN UP<br/><br/>
</form>
</div>
As for me I am calling the error message box only once but it shows up twice.
Not sure why it shows up twice.
why is that?
Try using the invalidHandler function to empty it.
invalidHandler: function() {
$('#alert-message').empty();
}
This will empty the #alert-message when the form is submitted and your rules fail. This will allow the errorPlacement function to be called multiple times without emptying #alert-message on multiple errors.
For example in your code.
$('#forgot_pwd').validate({
debug: true,
rules: {
username: {
minlength: 6,
required: true,
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "Enter your Username"
},
email: {
required: "Enter your Email",
email: "Enter valid email address"
},
},
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');
},
highlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
},
invalidHandler: function() {
$('#alert-message').empty();
}
});
I think you should clear $('#alert-message') before adding new message to it.
errorPlacement: function(error, element) {
error.hide();
$('.messagebox').hide();
$('#alert-message').empty()
error.appendTo($('#alert-message'));
$('.messagebox').slideDown('slow');
I have a radio button where only one should be checked. However the error message was showing on the wrong place, it is showing on the first radio button which is the "walk in". I want it to show under the choices of the radio buttons, under the radio button "under".
Here is my code
<form class="form-horizontal" id="formApplication" role="form">
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnWalkIn" value="Walk-In"> Walk-In
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnJobFair" value="Job Fair"> Job Fair
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnSocialMedia" value="Social Media"> Social Media
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnReferred" value="Referred"> Referred
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnOther" value="Other"> Other
</div>
</div>
<button type="submit" class="btn pull-right" id="btnContinue1">Continue</button>
</form>
And the JQuery
$("#formApplication").submit(function(e){
e.preventDefault();
}).validate({
rules:{
rbtnFind: "required"
},
messages: {
rbtnFind: "Please select an option"
},
highlight: function(element){
if($(element).attr('type') == 'radio'){
$(element.form).find("input[type=radio]").each(function(which){
$(element).closest('.form-group').addClass('has-error');
});
}
else {
$(element).closest('.form-group').addClass('has-error');
}
},
unhighlight: function(element){
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
//submit code
}
});
Here is the code in JSFiddle.
Here my Fiddle - https://jsfiddle.net/skyr9999/8nm3tvph/ i hope it helps you, i made changes in js and add placeholder to html:
$("#formApplication").submit(function(e){
e.preventDefault();
}).validate({
rules:{
rbtnFind: "required"
},
messages: {
rbtnFind: "Please select an option"
},
highlight: function(element){
if($(element).attr('type') == 'radio'){
$(element.form).find("input[type=radio]").each(function(which){
$(element).closest('.form-group').addClass('has-error');
});
}
else {
$(element).closest('.form-group').addClass('has-error');
}
},
unhighlight: function(element){
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
$(".error_placeholder").html(error.html());
},
submitHandler: function(form) {
$(".error_placeholder").html("");
//submit code
}
});
$("#formApplication").submit(function(e) {
e.preventDefault();
}).validate({
rules: {
rbtnFind: "required"
},
messages: {
rbtnFind: "Please select an option"
},
highlight: function(element) {
if ($(element).attr('type') == 'radio') {
$(element.form).find("input[type=radio]").each(function(which) {
$(element).closest('.form-group').addClass('has-error');
});
} else {
$(element).closest('.form-group').addClass('has-error');
}
//$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
console.log(error);
error.insertAfter('.has-error'); //Replace has-error with element
}
},
submitHandler: function(form) {
}
});
I have made some changes to your script, see if you want it that way
<form class="form-horizontal" id="formApplication" role="form">
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnWalkIn" value="Walk-In"> Walk-In
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnJobFair" value="Job Fair"> Job Fair
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnSocialMedia" value="Social Media"> Social Media
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" name="rbtnFind" id="rbtnReferred" value="Referred"> Referred
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<input type="radio" class="errorPlacement" name="rbtnFind" id="rbtnOther" value="Other"> Other
</div>
</div>
<div id="divFindFollowUp" class="form-group">
<!-- For the follow up for the question above -->
</div>
<button type="submit" class="btn pull-right" id="btnContinue1">Continue</button>
</form>
<script>
$("#formApplication").submit(function(e) {
e.preventDefault();
}).validate({
rules: {
rbtnFind: "required"
},
messages: {
rbtnFind: "Please select an option"
},
highlight: function(element) {
if ($(element).attr('type') == 'radio') {
$(element.form).find("input[type=radio]").last().closest('.form-group').addClass('has-error');
} else {
$(element).closest('.form-group').addClass('has-error');
}
//$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if ($(element).attr('type') == 'radio') {
error.insertAfter($(".errorPlacement").parent());
}
else{
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
},
submitHandler: function(form) {
}
});
</script>
Hi I succeed to make this code works but I don't know why this code is not working anymore anyone can help please on this?
Here this is my form
<form action="CreateUser" method="POST" id="subscribe">
<br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><b>#</b></span>
<label for="mail"></label>
<input type="text" class="form-control" name="mail" id="mail" placeholder="Adresse mail">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
<label for="firstname"></label>
<input type="text" class="form-control" name="firstname" id="firstname" placeholder="Entrez votre prenom">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
<label for="name"></label>
<input type="text" class="form-control" name="name" id="name" placeholder="Entrez votre nom">
</div>
</div>
<div class="form-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<label for="inputPassword"></label>
<input id="inputPassword" name="inputPassword" type="password" class="form-control" placeholder="Mot de passe">
</div>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-lock"></span></span>
<label for="txtConfirmPassword"></label>
<input id="txtConfirmPassword" name="txtConfirmPassword" type="password" class="form-control" placeholder="Retapez votre mot de passe">
</div>
</div>
<br>
<div class='modal-footer'>
<button class="btn btn-lg btn-success btn-block" name="submit" id="register" >Creer votre compte</button>
</div>
</form>
And here this the validate function I did:
<script>
$.validator.setDefaults({
debug: true,
success: "valid",
highlight: function (element) {
$(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) {
$(element).parent().removeClass('has-error').addClass('has-success');
},
errorElement: 'span',
errorClass: 'text-danger',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$.validator.addMethod("onlyletters", function (value, element) {
return this.optional(element) || /^[a-zA-ZáàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s-]+$/i.test(value);
}, "Please enter letters only.");
$.validator.addMethod("passwd", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/i.test(value);
}, "Please enter letters and numbers only.");
$('#subscribe').validate({
rules: {
inputPassword: {
required: true,
minlength: 6,
maxlength: 12,
passwd: true
},
txtConfirmPassword: {
required: true,
minlength: 6,
maxlength: 12,
passwd: true,
equalTo: "#inputPassword"
},
mail: {
required: true,
email: true
},
firstname: {
required: true,
maxlength: 20,
onlyletters: true
},
name: {
required: true,
maxlength: 20,
onlyletters: true
}
},
messages: {
inputPassword: {
required: "Password is required",
minlength: "Your password must have 6 characters."
},
txtConfirmPassword: {
required: "Password is required",
minlength: "Your password must have 6 characters.",
equalTo: "Your password doesn't match."
},
mail: {
required: "Email is required",
email: "Your mail address should be like user#example.com"
}
}
});
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
}else{
}
});
</script>
And the imported jquery plugin
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
The plugin are imported from a previous page index.html and this form is loading from a modal
There is a problem on your .click() syntax, here is the working code in a JSFiddle.
Your error was a } and ) problem.
Your click event handler is not correct.
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
}else{
});// This needs to be removed!!!!!
}
});
Working code:
$('#register').click( function() {
// Error checking here.
if ($('div.error').is(':visible')) {
return false;
} else {
}
});
I have divided my form into 3 tabs and and when I click on next button it moves to the next tab and finally in the last tab when submit is clicked the whole form is getting validated which is also correct but my problem is that when I click next it must move to next tab only when the current tab validations are true.
Here is my form
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<form name="registration_form" id="registration_form" action="save.php" method="post">
<div id="tabs">
<ul>
<li>Basic Details</li>
<li>Employee Details</li>
<li>Address</li>
</ul>
<div id="tabs-1">
<div class="field">
<label>First Name</label>
<input type="text" name="first_name" id="first_name" />
<label>Last Name</label>
<input type="text" name="last_name" id="last_name" />
</div>
<div class="field">
<label>Age</label>
<input type="text" name="age" id="age"/>
</div>
<div class="field">
<input value="Next" type="button" id="next-1" name="1"/>
</div>
</div>
<div id="tabs-2">
<div class="field">
<label>Company</label>
<input type="text" name="company" id="company">
</div>
<div class="field">
<label>Designation</label>
<select name="designation" >
<option value="software developer">software developer</option>
<option value="software analyst">software analyst</option>
<option value="tester">tester</option>
</select>
</div>
<div class="field">
<label>Annual income</label>
<input type="text" name="income" id="income"> in Rupees
</div>
<div class="field">
<input value="Next" type="button" id="next-2" name="2" />
</div>
</div>
<div id="tabs-3">
<div class="field">
<label>Address</label>
<input type="text" name="address" id="address"
</div>
<div class="field">
<input type="submit" name="submit" value="SUBMIT" id="reg_submit" />
</div>
</div>
</div>
</form>
Javascript Validation code is
<script type="text/javascript">
$( "#tabs" ).tabs();
var validator = $("#registration_form").validate({ rules: {
first_name: {
required: true,
maxlength:30,
},
last_name: {
required: true,
maxlength:30,
},
age: {
digits:true,
},
company: {
required: true,
},
designation: {
required: true,
},
income: {
digits:true,
},
address: {
maxlength:100,
},
},
messages: {
first_name: {
required: "Please enter First Name",
maxlength: "maximum 30 characters are allowed",
},
last_name: {
required: "Please enter Last Name",
maxlength: "maximum 30 characters are allowed",
},
age: {
digits: "Enter only digits",
},
Company: {
required: "Please enter Company",
},
designation: {
required: "Please Select Designation",
},
income: {
digits: "Enter only digits",
},
address: {
maxlength: "Maximum of 100 characters are allowed",
},
}
});
// I have seen some examples in stack overflow and tried as below, but it is not working
var tabs = $("#tabs").tabs();
$('[id^=next-]').click(function() {
var tabid = $(this).attr('name');
var valid = true;
var i = 0;
var $inputs = $(this).children("div").find("input");
$inputs.each(function() {
if (!validator.element(this) && valid) {
validator.focusInvalid();
valid = false;
}
});
if (valid) {
var tabId = $(this).attr('name');
$( "#tabs" ).tabs( "option", "active", tabId );
}
});
$("input[id=reg_submit]").click(function() {
$(this).parents("form").submit();
});
please help,
Thanks
var next1 = false;
var next2 = false;
var next3 = false;
$('#next-1').on('click', function(){
//validate your inputs fields
var next1 = true;// assign true if validation is correct.
});
$('#next-2').on('click', function(){
//validate your inputs fields
var next2 = true;// assign true if validation is correct
});
$('#next-3').on('click', function(){
//validate your inputs fields
var next3 = true;// assign true if validation is correct
if((next1 == 'true') && (next2 == 'true') && (next3 == 'true'))
{
//submit form
}
})
try this example
Or Make three forms,