We Keep Coding

Validation not working using Jquery Validation plugin

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: {
[...]

Why does jquery.validate.js show error messages twice?

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');

Jquery Password and confirm password validation not working Properly

I'm trying to validate new password and confirm new password. even i entered same password also it was showing an error like both password must be same. please help me where i did wrong. Below is my html and jquery code.
HTML Form
<form role="form" id="clientresetpassword" name="clientresetpassword" action="<?php echo site_url('Home/client_password_reset'); ?>" method="post" style="padding: 10px;">
<div class="row">
<?php echo validation_errors(); ?>
</div>
<div class="form-group">
<label>Current Password <span class="mandatory"> *</span></label>
<input type="password" name="curpas" class="form-control" value="<?php echo set_value('curpas'); ?>" placeholder="Enetr Your Current password" required>
</div>
<div class="form-group">
<label>New Password <span class="mandatory"> *</span></label>
<input type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>
</div>
<div class="form-group">
<label>Confirm New Password <span class="mandatory"> *</span></label>
<input type="password" name="cnfnewpass" class="form-control" placeholder="Confirm New Password" value="" required>
</div>
<div class="form-group">
<input type="password" class="btn btn-primary" name="reset_password" value="Reset Password">
</div>
</form>
Jquery validation
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#clientresetpassword").validate({
rules: {
curpas: {
required: true,
minlength : 5,
maxlength : 15
},
newpass:{
required: true,
minlength: 5,
maxlength: 15
},
cnfnewpass: {
required: true,
minlength: 5,
maxlength: 15,
equalTo: "#newpass"
},
},
messages: {
curpas: {
required: "Please enter Password",
minlength: "Password length must be min. of 5 characters long",
maxlength: "Password length must not Exceed 15 characters"
},
newpass:{
required: "Please enter New Password",
minlength: "New Password length must be min. of 5 characters long",
maxlength: "New Password length must not Exceed 15 characters"
},
cnfnewpass: {
required: "Please enter Confirm New Password",
minlength: "Confirm New Password length must be min. of 5 characters long",
maxlength: "Confirm Password length must not Exceed 15 characters",
equalTo: "New Password and Confirm New Password must be same"
},
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);

You have to set id for a newpassword field
e.g
<input id="newpass" type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>
Because you are using a id selector in jQuery validation i.e equalTo: "#newpass"

Here is the problem:
equalTo: "#newpass" // referring it by ID
but no id is provided to:
<input type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>
Provide id attribute to it.

JQuery validate not showing error

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

how to validate a form tab wise, written in multiple tabs?

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,