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

How can I add operator ternary on jQuery validate?

My html code like this :
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>
My JavaScript code to validate with jQuery validate like this :
jQuery('.validatedForm').validate({
rules: {
"password": {
minlength: 6
},
"password_confirmation": {
minlength: 6,
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
Demo and full code like this : http://jsfiddle.net/oscar11/fEZFB/609/
I want to add condition in jQuery validate
If password filled, required: true on password_confirmation
If password not filled, required: false on password_confirmation
Seems I need to add operator ternary on rules password_confirmation. But I'm still confused
How can I do it?

I try to make an answer for your problem, check this out
$(document).ready(function() {
$('.validatedForm').validate({
rules: {
"password": {
minlength: 6,
},
"password_confirmation": {
minlength: 6,
required: function(element) {
return $("input[name=password]").val() != "";
},
equalTo : "#password"
}
},
messages: {
"password": 'Please enter a password, minimal 6 characters',
"password_confirmation": 'Please confirm your password'
},
});
$('button').click(function () {
console.log($('.validatedForm').valid());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
<form class="validatedForm" id="commentForm" method="get" action="">
<fieldset>
<input name="password" id="password" />
<input name="password_confirmation" />
</fieldset>
</form>
<button>Validate</button>

jQuery validation doesn't work on first attempt

I have a problem, my validation start work only after click button, when i input data first time , i don't have error messages, Rest server don't save invalid data, on next input data, validator writes an error's. My code
$(document).ready(function() {
$("#register-form").validate({
rules: {
login: {
required: true,
minlength: 3,
maxlength: 15,
regexp: '^[a-zA-Z0-9_-]+$'
},
password: {
required: true,
minlength: 3,
maxlength: 15,
},
firstName: {
required: true,
minlength: 2,
maxlength: 15,
},
lastName: {
required: true,
minlength: 2,
maxlength: 15,
},
email: {
required: true,
email: true
},
birthDate: {
required: true,
regexp: '^((19|20)\\d\\d)-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$',
}
},
messages: {
login: {
required: "This field cannot be null",
minlength: "Login at least 3 symbols",
maxlength: "Name maximum 15 symbols",
regexp: 'Login can consist of letters, numbers, underscores(_),hyphens(-) !'
},
password: {
required: "This field cannot be null",
minlength: "Password at least 3 symbols",
maxlength: "Password maximum 15 symbols",
},
firstName: {
required: "This field cannot be null",
minlength: "Name at least 2 symbols",
maxlength: "Name maximum 15 symbols",
},
lastName: {
required: "This field cannot be null",
minlength: "Surname at least 2 symbols",
maxlength: "Surname maximum 15 symbols",
},
email: "Please enter a valid email address",
birthDate: {
required: "This field cannot be null",
regexp: "Please input date in format YYYY-MM-DD",
}
}
});
jQuery.validator.addMethod(
'regexp',
function(value, element, regexp) {
var re = new RegExp(regexp);
return this.optional(element) || re.test(value);
},
"Please check your input."
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<form action="" id="register-form">
<div class="form-left-col">
<label>Login:</label>
<input type="text" id="login" name="login" value="" required />
<label>Password:</label>
<input type="text" id="password" name="password" value="" required/>
<label>First Name:</label>
<input type="text" id="firstName" name="firstName" value="" required/>
<label>Last Name:</label>
<input type="text" id="lastName" name="lastName" value="" required/>
<label>Email:</label>
<input type="text" id="email" name="email" value="" required/>
<label>Birthday:</label>
<input type="text" id="birthDate" name="birthDate" value="" required/>
<label>Role:</label>
<select id="role">
<option selected="selected">USER</option>
<option>ADMIN</option>
</select>
<button class="save">Save</button>
</div>
</form>

Multiple validation in javascript/jquery/html form

I am using bootstrap3 form with jquery/javascript to validate input. This was taken from here
Here is part of my form:
<form id="contact-form" action="#" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="sr-only" for="name">Your Name</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="name" id="name" placeholder="Your Name">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<div class="controls">
<input type="text" class="input-xlarge form-control" name="email" id="email" placeholder="Email">
Here is the javascript:
<script>
$(document).ready(function(){
jQuery.validator.setDefaults({
errorClass: "help-block"
});
$('#contact-form').validate({
rules: {
name: {
minlength: 3,
regex: "/^[A-Za-z\']*$/",
required: true
},
email: {
required: true,
email: true
},
subject: {
minlength: 2,
required: true
},
message: {
minlength: 2,
maxlength: 400,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready
</script>
The required field and number of digits work wonderfully well. I also intend to add further validation, for example, accept alphabets in name field. I have tried using regex but does not seem to be working.
how to use regex (or multiple) validation in this type of javascript validation ?
how to give appropriate error message when a field has multiple validations (only alphabets and more than 3 characters) ?
I am very new to web development, so these might appear noob questions. Just getting hands on html now. Please guide in right direction.

For email you should add something like this:
$.validator.addMethod("email", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+#[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Invalid email address");
then rules for email should be:
email: "required email",