Develop Reference

JS validation doesn't run after I enter a valid input and submit the form with rest of the input fields empty

I am developing a web directory with a form on one of its pages. JS validation plug in is used. While submitting the form without filling any Input fields, the form throws errors below each input field as expected! But submitting the form with just one input box filled in refreshes the current page as the action value is set to current page with PHP codes in it, instead of staying on the same page to continue to throw errors for the rest of the fields that are yet to be filled in! I have searched online to find nothing useful in figuring out what is wrong with the script. Could anyone here please look into the code below and recommend the best solution? Thanks.
$(document).ready(function() {
$("#userForm").validate({
rules: {
cname: {
required: true,
lettersonly: true,
minlength: 3
},
cemail: {
required: true,
email: true
},
cphone: {
required: true,
number: true,
minlength: 10,
maxlength: 10
},
cbusiness: {
required: true,
url: true
},
cbcategory: {
required: true,
minlength: 6
},
curl: {
required: true,
minlength: 6
},
},
messages: {
cname: "Please enter your name",
cemail: "Please enter a valid email address",
cphone: {
required: "Please enter your phone number",
number: "Please enter only numeric value"
},
cbusiness: {
required: "Please enter your business",
},
cbcategory: {
required: "Please enter a business category",
},
curl: {
required: "Please enter the URL to your website",
},
}
});
});
The form is as below.
<form action="" method="post" name="userForm" id="userForm">
<input type="text" name="cname" id="cname" placeholder=" Your Name">
<input type="text" name="cemail" id="cemail" class="email" placeholder="Your Email">
<input type="text" name="cphone" id="cphone" placeholder="Your Phone">
<input type="text" name="cbusiness" id="cbusiness" class="email" placeholder=" Your Business">
<input type="text" name="cbcategory" id="cbcategory" placeholder="Business category">
<input type="text" name="curl" id="curl" class="email" placeholder="URL"><br>
<label for='message'>Enter the code in the box below : </label>
<img src="captcha.php?rand=<?php echo rand();?>" id='captchaimg'>
<input type="text" id="captcha_code" name="captcha_code">
<input type="submit" name="Submit" id="Submit" value="Submit" class="button1"><br>
Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh.
</form>

Assuming you have included the validation libraries corectly, you will have to set messages for all of the validation types like:
messages: {
cname: {
required: "Please enter your name",
lettersonly: "Letters only",
minlength: "Min length 3 required"
},
cemail: {
required: "Please enter a valid email address",
email: "Invalid email"
}
}
Working JSFIDDLE.
You have to include the plugin files something like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
UPDATE:
After discussing with OP on chat, we came to the conclusion that the plugin files had to be included correctly and there was an incompatibility between the jQuery version(v 1.7.1) he used and the plugin version(v 1.16.0). So we had to add a custom method for lettersonly.
The code for custom method:
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");

jquery validate plugin- required validation doesn't work as it should

I use jquery validate plugin.
One of my demand is to show the error message when the field lost it focus.
rules: {
firstName: {
required: true,
//minlength: 1,
maxlength: 30
},
lastName: {
required: true,
//minlength: 1,
maxlength: 30
}
},
messages: {
firstName: {
required: "Please enter your first name",
maxlength: "Please enter a value less than or equal to 30."
},
lastName: {
required: "Please enter your last name",
maxlength: "Please enter a value less than or equal to 30."
}
}
<div class="inline ui-grid-a">
<div class="firstInput ui-block-a">
<input type="text" class='signup-input first-name lettersOnly required' name="firstName" id="firstName" placeholder="" required value="${user?.firstname}">
</div>
<div class="secInput ui-block-b">
<input type="text" class='signup-input last-name lettersOnly required' name="lastName" id="lastName" placeholder="" required value="${user?.lastname}">
</div>
</div>
The maxlength for example works as expected , but the required start to work on focus out only if some validation happened before.

Validation plugin files are not working

I am doing my form validation with jquery validation plugin. Everything seems fine but its not working. No message appears. Or may be its due to files that I have included.
files included
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>
here is jquery
<script type="text/javascript">
$(function($){
$("#joinform").validate({
rules: {
firstname: {
required: true,
maxlength: 30
},
lastname: {
required: true,
maxlength: 30
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
repassword: {
required: true,
equalTo: "#password"
}
},
messages: {
firstname: {
required: "Please enter your firstname",
maxlength: "Firstname is too large"
},
lastname: {
required: "Please enter your lastname",
maxlength: "Lastname is too large"
},
email: {
required: "Please enter email address",
email: "Please enter the valid email"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
repassword: {
required: "Please confirm your password",
equalTo:"Passwords should be same"
}
}
});
});
</script>
here is html.
<form role="form" name="joinform" id="joinform" action="" method="post">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" class="form-control" name="firstname" placeholder="First Name" required/>
<input type="text" class="form-control" name="lastname" placeholder="Last Name" required/>
<br/>
<label for="email">Email: </label>
<input type="email" class="form-control" name="email" placeholder="Enter email" required email/>
<br/>
<label for="pwd">Password: </label>
<input type="password" class="form-control" name="password" placeholder="at least 6 characters long" required/>
<label for="repass">Retype-Password:</label>
<input type="password" class="form-control" name="repassword" placeholder="Confirm your password" required/>
<br/>
Already a member?Login<br/>
<br/>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>

When using any jQuery plugin, you must load jQuery first. You are also including the plugin twice. You must not include each plugin more than once... preferably use the latest version.
This is correct...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
Otherwise, use the latest plugin version supported by your version of jQuery...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>

Jquery: Form validation not working

I am very new to Jquery and hope you guys can help me with this jquery validation problem.
Been trying to validate the form but it does not validate at all. It accepts anything that I type in the field, regardless of what restrictions I set.
Please help. Thank you.
Here is my code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$('#form').validate({
alert("bbbb");
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20,
lettersonly: true
},
ssn: {
required: true,
minlength: 9,
maxlength: 9,
nowhitespace: true
},
gender: {
required: true
},
mobile: {
required: true,
minlength: 10,
maxlength: 13,
digits: true
},
address: {
required: true,
minlength: 10,
},
email: {
required: true,
minlength: 6,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters",
maxlength: "Name should be less than 20 characters",
lettersonly: "Name should contain only letters"
},
ssn: {
required: "Please enter your NRIC",
minlength: "NRIC should be more than 9 characters",
maxlength: "NRIC should be less than 9 characters",
nowhitespace: "NRIC should not have any spaces"
},
gender: {
required: "Please select your gender",
},
mobile: {
required: "Please enter your mobile number",
minlength: "Mobile number should be more than 10 characters",
maxlength: "Mobile number should be less than 13 characters",
digits: "Mobile number should contain only digits"
},
address: {
required: "Please enter your address",
minlength: "Address should be more than 10 characters",
},
email: {
required: "Please enter your email address",
minlength: "Password should be more than 6 characters",
email: "Please enter a valid email address"
}
},
});
$("#submit").click(function(){
$("#form").submit();
return false;
});
});
</script>
<div id="form">
<center>
<form id="form">
<div class="col-xs-12">
<input type="text" name="name" id="name" placeholder="Name" required />
</div>
<div class="col-xs-12">
<input type="text" name="nric" id="nric" placeholder="NRIC" required />
</div>
<div class="col-xs-12">
<select class="dropdown" id="gender" onChange="changeColor(this)">
<option value="" disabled selected>Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<div class="col-xs-12">
<input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
</div>
<div class="col-xs-12">
<input type="text" name="address" id="address" placeholder="Address" required />
</div>
<div class="col-xs-12">
<input type="email" name="email" id="email" placeholder="Email" required />
</div>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
</center>
</div>

You have 2 elements with the id="form", so the validator is assigned to the div not to the form.
Change the id value of the div to something else.
Also the additional-methods.js file must be added after query.validate.js and there is a syntax error because of the alert() within the validate so
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<div>
<center>
<form id="form">
<div class="col-xs-12">
<input type="text" name="name" id="name" placeholder="Name" required />
</div>
<div class="col-xs-12">
<input type="text" name="nric" id="nric" placeholder="NRIC" required />
</div>
<div class="col-xs-12">
<select class="dropdown" id="gender" onChange="changeColor(this)">
<option value="" disabled selected>Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<div class="col-xs-12">
<input type="text" name="mobile" id="mobile" placeholder="Mobile" required />
</div>
<div class="col-xs-12">
<input type="text" name="address" id="address" placeholder="Address" required />
</div>
<div class="col-xs-12">
<input type="email" name="email" id="email" placeholder="Email" required />
</div>
<input id="submit" class="button" type="submit" value="submit"/>
</form>
</center>
</div>
then
jQuery(function ($) {
$('#form').validate({
rules: {
name: {
required: true,
minlength: 2,
maxlength: 20,
lettersonly: true
},
ssn: {
required: true,
minlength: 9,
maxlength: 9,
nowhitespace: true
},
gender: {
required: true
},
mobile: {
required: true,
minlength: 10,
maxlength: 13,
digits: true
},
address: {
required: true,
minlength: 10,
},
email: {
required: true,
minlength: 6,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Name should be more than 2 characters",
maxlength: "Name should be less than 20 characters",
lettersonly: "Name should contain only letters"
},
ssn: {
required: "Please enter your NRIC",
minlength: "NRIC should be more than 9 characters",
maxlength: "NRIC should be less than 9 characters",
nowhitespace: "NRIC should not have any spaces"
},
gender: {
required: "Please select your gender",
},
mobile: {
required: "Please enter your mobile number",
minlength: "Mobile number should be more than 10 characters",
maxlength: "Mobile number should be less than 13 characters",
digits: "Mobile number should contain only digits"
},
address: {
required: "Please enter your address",
minlength: "Address should be more than 10 characters",
},
email: {
required: "Please enter your email address",
minlength: "Password should be more than 6 characters",
email: "Please enter a valid email address"
}
},
});
});
Demo: Fiddle

Hey you need to create custom rule in the library
like this
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg != value;
}
and then have use it like this
rules: {
gender: {valueNotEquals: "default"}
},
messages: {
gender: { valueNotEquals: "Please select a payment method"}
}

bug in jquery validation

I have used the jquery form validation from this site http://jquery.bassistance.de/validate/demo/. In this site validation works when the field values are empty. I need it to work if i set values to the form fields for example the value for the email field is Email Address. How can i modify that?. The internal script that i have used is
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
This is my html
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
Mailing list digester
</label>
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>

So my understanding from your question is that if they leave the field with the default value, e.g. "Email Address", you want that to error. You'll need to create your own custom validation method, using the addMethod function. Then you refer to that method in your options. I think something like this is the correct syntax:
$.validator.addMethod("checkdefault", function (value, element, params) {
if (params[0] == params[1] || params[0].length === 0) {
// user hasn't changed value from the default, or they've left it completely blank
return false;
} else {
return true;
}
});
email: {
// pass an array of params, first one is the field value, second is your default text
checkdefault: [$("#email").val(), 'Email Address'],
email: true
}

When you have set you values, call $("#signupForm").validate() if you set your values from javascript. If you do it with server side technology validate on document.Ready()