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 Validation and Messages

I'm trying to get an error message to show when my fields are missing input. Once both are filled in I want a success message to show in place of #error.
Not sure why I'm not getting any message currently.
$("input[type='button']").click(function() {
$("form").validate({
rules: {
username: "required"
},
messages: {
username: "please enter a name"
}
});
alert("Submitted");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<form>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw">
</p>
<p>
<input type="button" value="Submit">
</p>
<!-- placeholder for response if form data is correct/incorrect -->
<p id="error"></p>
</form>

What about this ?
$("input[type='button']").click(function() {
if($("#username").val()==""){
$("#error").html("Please enter a name");
return;
}
if($("#pw").val()==""){
$("#error").html("Password required");
return;
}
alert("Submitted");
});

Call javascript function on submit form

I am trying to call JavaScript function while submitting the form.
Here is code but while submitting function not called, please suggest something and I want to show error messages using javascript method as well , how can I show error messages in validation using JavaScript.
<form id="register" name="register" onsubmit="validateForm()">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
},
"email": {
required: true,
}
}
});
});
</script>
and here is JavaScript code
function validateForm()
{
var password = document.forms["register"]["Password"].value;
var con-password = document.forms["register"]["Confirm-Password"].value;
if(password != con-password)
{
document.getElementById('password-error').style.visibility='visible';
alert("not matched");
}
alert("matched");
}

This is probably due to a syntax error in your script. When you see errors like that, look into the JavaScript console of your browser.
In this case, con-password is not a valid variable name. What JavaScript sees is:
var con - password ...
i.e. the code says "substract password from con". Try an underscore instead:
var con_password ...

Do not need to do anything extra for password matching, just add equalTo: "#Password" to it as shown in the below example:
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm-Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
Working example:
<form id="register" name="register" action="" method="post">
<label for="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br>
<label for="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br>
<label for="email"> Email </label><br>
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit">Submit</button>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm_Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
}
},
messages: {
Password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm_Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
// Your function call
return false; // return true will submit form
}
});
});
</script>

Maybe instead of checking if passwords matches you can add new rule in validation?
something like:
... "Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"} ....
and for messages add:
... messages: {
"Password": "Your message",
}...
and all in all something like this: `
$(document).ready(function () {
$("Your form name").validate({
rules: {
"Username": {
required: true,
},
"Password": {
required: true,
minlength: 5
},
"Confirm-Password": {
required: true,
equalTo: "#Password"
},
"email": {
required: true,
email: true
}
}
messages: {
"Password": "Your message",
"email": "Your Message",
},
submitHandler: function (form) {
form.submit();
}
});
});`

try this. i add onclick event on the submit button to call the function validateForm()
html
<form id="register" name="register">
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" onclick="validateForm()">Submit</button>
</form>
this is the validateForm()
<script type="text/javascript">
function validateForm() {
var username = $('#Username'),
password = $('#Password'),
confirm = $('#Confirm-Password'),
email = $('#email');
$('#register').submit(function(ev){
// check if all fields is not empty
if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') {
ev.preventDefault(); // prevent form submit
alert('All fields are required.'); //alert message
//check if password and confirm password is equal
} else if(password.val() != confirm.val()){
ev.preventDefault(); // prevent form submit
alert('password did not match.'); //alert message
} else {
return true; // submit form if validation has passed.
}
});
}
</script>

May be you missed - you need to use method="post" in
http://jsfiddle.net/dLbLS/
<form id="register" name="register" method="post" onsubmit="validateForm();" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>
</form>

Use this code
<input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'">
do one thing i am sending one link please go through that link i have commented my code over there copy and paste it and test it....
How to do validation in JQuery dialog box?
if this answer is correct then please mark it as answer for others....

JQuery: form validation - not getting any results

I am trying to implement the simple form validation plugin found here: http://www.jquery4u.com/forms/basic-jquery-form-validation-tutorial/
but I cannot seem to get it working.
I have a simple form:
<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">
<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>
</form>
And the associated plugin script:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#signupform").validate({
rules: {
signupusername: "required",
signupfirstname: "required",
signuplastname: "required",
signupemail: {
required: true,
email: true
},
signuppassword: {
required: true,
minlength: 5
},
tandcyes: "required"
},
messages: {
signupusername: "Please enter your User Name",
signupfirstname: "Please enter your firstname",
signuplastname: "Please enter your lastname",
signuppassword: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
signupemail: "Please enter a valid email address",
tandcyes: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
But it will just not work.
Of course I have checked both the plugin and link to JQuery are present and correct. Nothing appears in the console either. It just doesnt seem to trigger.
Does anyone know whats going on?
Thanks!

The problem is that you have included 2 times the same script.
The functions in script with validation appear 2 times in the source. Which is rather hard for the browser to know which one to pick.
Check head for two scripts.
Please add all your inputs in the form they are not present in the form tags.
<form>
<input type=... />
<input type=... />
</form>
if you close the form before your inputs that is the problem.

use this page and its works
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<title>Basic jQuery Validation Form Demo | jQuery4u</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#signupform").validate({
rules: {
signupusername: "required",
signupfirstname: "required",
signuplastname: "required",
signupemail: {
required: true,
email: true
},
signuppassword: {
required: true,
minlength: 5
},
tandcyes: "required"
},
messages: {
signupusername: "Please enter your User Name",
signupfirstname: "Please enter your firstname",
signuplastname: "Please enter your lastname",
signuppassword: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
signupemail: "Please enter a valid email address",
tandcyes: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
</head>
<body>
<h1>Basic jQuery Validation Form Demo</h1>
<!-- HTML form for validation demo -->
<form id="signupform" name="signupform" action="page" method="post" novalidate="novalidate">
<input type="text" id="signupusername" name="signupusername">
<input type="text" id="signupemail" name="signupemail">
<input type="password" id="signuppassword" name="signuppassword">
<input type="text" id="signupfirstname" name="signupfirstname">
<input type="text" id="signuplastname" name="signuplastname">
<input type="checkbox" name="tandc" value="tandcyes"> I agree
<button type="submit" value="Signup" class="submit">Signup</button>
</form>
<!-- END HTML form for validation -->
</body>
</html>

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()