I have been trying to validate a form with jquery validate plugin.As a newbie i am facing problem with that.Here is the code
$(document).ready(function() {
$("#log-form").validate({
errorElement: 'div',
rules: {
"username": {
required: true,
minlength: 5
},
"password": {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "Provide a username,sire",
minlength: "Username with length 5 atleast,is required"
},
password: {
required: "Provide a password,sire",
minlength: "Minimum length of 5 is required for password,sire"
}
}
submitHandler: function(form) {
form.submit();
}
});
});
<form name="log-form" id="log-form" method="post" action="check_login.php">
<label for="username">Username</label>
<input type="text" class="" id="username" name="username">
<br>
<label for="password">Password</label>
<input type="password" class="" id="password" name="password">
<br>
<button type="submit" name="sub-btn" class="sub-btn">Login</button>>
</form>
The validation is not working as i change field after typing in one neither on submiting the form.
As per #unidentified: There is a syntax error in your code, missing , after the messages property. Please check How can I debug my JavaScript code?
$(document).ready(function() {
$("#log-form").validate({
errorElement: 'div',
rules: {
"username": {
required: true,
minlength: 5
},
"password": {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "Provide a username,sire",
minlength: "Username with length 5 atleast,is required"
},
password: {
required: "Provide a password,sire",
minlength: "Minimum length of 5 is required for password,sire"
}
}, // syntax error, comma was missing here
submitHandler: function(form) {
form.submit();
}
});
});
Related
I have developed a simple 3 step form wizard for registration.
All the client side validation (JavaScript) is working.
The problem is when a user gets to the last stage and click submit, it does nothing.
I want it to direct to the PHP code I have written.
Update The next button does nothing when I click on it after updating my html code
Updated HTML code
<form action="register.php">
<div id ="personal-form">
<h4><b>Personal Details:</b></h4>
<hr>
<div class="form-group">
<label class="sr-only" for="first-name">First name</label>
First Name
<input type="text" name="firstname" placeholder="" class="form-control" id="firstname">
</div>
<div class="form-group">
Last Name
<label class="sr-only" for="last-name">Last name</label>
<input type="text" name="lastname" placeholder="" class="form-control" id="lastname">
</div>
<div class="form-group">
Phone Number
<label class="sr-only" for="name">Phone Number</label>
<input type="text" name="phone" placeholder="" class="form-control" id="phone">
</div>
<div class="form-group">
<p class="has-error" id="error-msg"></p>
</div>
<div class="f1-buttons">
<button type="button" id="first-next" class="btn btn-next">Next</button>
</div>
</div>
<div id="store-form">
........
<button type="button" class="btn btn-previous" id="first-
previous">Previous</button>
<button type="button" class="btn btn-next"
id="second-next">Next</button></center>
</div>
<div id="account-form">
........
<button type="button" class="btn btn-previous" id="second-
previous">Previous</button>
<button type="submit" class="btn btn-next" id="submit">Submit</button>
</center>
</div>
</form>
JavaScript code
function init() {
//hide the other two forms
$("#store-form").hide();
$("#account-form").hide();
//$("#first-next").addClass("disabled");
//var state2 = $("#state").val();
/*$("#state").change(function ()
{
var state2 = $("#state").val();
alert(state2);
})*/
//alert(state2);
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
})
$.validator.addMethod('strongPassword', function (value, element) {
return this.optional(element) || value.length >= 6
// && /\d/.test(value) && /[a-z]/i.test(value);
}, 'Your password must be at least 6 characters long');//'Your password must be at least 6 characters long, contain at least on e number and a character');
//The method for all select options
$.validator.addMethod('checkSelect', function (value, element) {
return this.optional(element) || (value != "Please choose...")
// && /\d/.test(value) && /[a-z]/i.test(value);
}, 'You must select an option');//'Your password must be at least 6 characters long, contain at least on e number and a character');
$("#personal-form").validate({
rules: {
firstname: {
required: true,
nowhitespace: true,
lettersonly: true
},
lastname: {
required: true,
nowhitespace: true,
lettersonly: true
},
phone: {
required: true,
}
},
messages: {
firstname: {
required: 'Please enter your first name',
nowhitespace: 'Please enter a valid first name',
lettersonly: 'Please enter only alphabets'
},
lastname: {
required: 'Please enter your first name',
nowhitespace: 'Please enter a valid last name',
lettersonly: 'Please enter only alphabets'
},
phone: {
required: "Please enter a valid phone no"
}
}
});
/*if($("#personal-form").valid() == true)
{
$("#first-next").removeClass("disabled");
alert($("#personal-form").valid());
}*/
if ($("#first-next").click(function () {
if ($("#personal-form").valid() == true) {
//$("#first-next").removeClass("disabled");
//alert($("#personal-form").valid());
$("#personal-form").hide();
$("#store-form").fadeIn();
$("#account-form").hide();
//$("#error-msg").html("");
}
else {
//$("#error-msg").html("Please correct all errors before clicking next");
}
}));
/*$("#firstname").on('change', function() {
if($("#firstname").valid() == true)
{
console.log("test");
alert("It worked");
}
});*/
//$('#firstname').on('input', function()
//{
//var firstname = $("#firstname").val();
//alert(firstname);
//alert("hello");
//console.log("test");
//alert("You just typed something in the firstname field");
//});
$("#store-form").validate({
rules: {
storename: {
required: true
},
state: {
required: true,
checkSelect: true
},
lga: {
required: true,
checkSelect: true
},
address: {
required: true,
},
category: {
required: true,
checkSelect: true
},
description: {
required: true,
lettersonly: true
}
},
messages: {
storename: {
required: "Please enter the name of your store"
},
address: {
required: "Please enter the address of your store"
},
description: {
required: "Briefly descibe what you sell or do"
}
}
});
if ($("#second-next").click(function () {
if ($("#store-form").valid() == true) {
//$("#first-next").removeClass("disabled");
//alert($("#personal-form").valid());
$("#personal-form").hide();
$("#store-form").hide();
$("#account-form").fadeIn();
//$("#error-msg").html("");
}
else {
//$("#error-msg").html("Please correct all errors before clicking next");
}
}));
if ($("#first-previous").click(function () {
$("#personal-form").fadeIn();
$("#store-form").hide();
$("#account-form").hide();
//$("#error-msg").html("");
}));
$("#account-form").validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
strongPassword: true
},
password2: {
required: true,
equalTo: "#password"
}
},
messages: {
email: {
required: 'Please enter your email address',
email: "Please enter a valid email address"
},
password: {
required: 'Please enter your password',
strongPassword: "Your password is not strong enough"
},
password2: {
required: 'Please enter your password',
equalTo: "Both passwords don't match"
}
}
});
$("#email").on('input', function () {
if ($("#email").valid() == true) {
//console.log("test");
//alert("It worked");
var email = $("#email").val();
$("#check-email-server").load('php/check_email.php', { "email": email });
}
});
$("#email").on('focusout', function () {
if ($("#email").valid() == true) {
//console.log("test");
//alert("It worked");
var email = $("#email").val();
$("#check-email-server").load('php/check_email.php', { "email": email });
}
});
if ($("#second-previous").click(function () {
$("#personal-form").hide();
$("#store-form").fadeIn();
$("#account-form").hide();
//$("#error-msg").html("");
}));
}
The three forms should all connect to 1 PHP file.
The problem is when I click submit it does nothing.
How do I connect the three different forms together and make the submit button work?
The last button should be of type "submit" <button type="submit"> otherwise a normal "button" doesn't submit the form (or maybe you have to write a js click event to submit the form.)
AND
You must put all inputs in the same form to send them to php, consider to replace forms with divs and wrap them inside an unique form. If you use 3 different forms only the input elements of the last form will be sent to backend but I think you need all inputs.
This is an example:
http://jsfiddle.net/2sdtjydu/1/
<form action="" method="post">
<div id ="personal-form">
<h4><b>Personal Details:</b></h4>
<hr>
<div class="form-group">
<label class="sr-only" for="first-name">First name</label>
First Name
<input type="text" name="firstname" placeholder="" class="form-control" id="firstname">
</div>
<div class="form-group">
Last Name
<label class="sr-only" for="last-name">Last name</label>
<input type="text" name="lastname" placeholder="" class="form-control" id="lastname">
</div>
<div class="form-group">
Phone Number
<label class="sr-only" for="name">Phone Number</label>
<input type="text" name="phone" placeholder="" class="form-control" id="phone">
</div>
<div class="form-group">
<p class="has-error" id="error-msg"></p>
</div>
<div class="f1-buttons">
<button type="button" id="first-next" class="btn btn-next">Next</button>
</div>
</div>
<div id="store-form">
........
<button type="button" class="btn btn-previous" id="first-
previous">Previous</button>
<button type="button" class="btn btn-next"
id="second-next">Next</button>
</div>
<div id="account-form">
........
<button type="button" class="btn btn-previous" id="second-
previous">Previous</button>
<button type="submit" class="btn btn-next" id="submit">Submit</button>
</div>
</form>
And this is the jquery:
$(document).ready(function () {
//hide the other two forms
$("#store-form").hide();
$("#account-form").hide();
//$("#first-next").addClass("disabled");
//var state2 = $("#state").val();
/*$("#state").change(function ()
{
var state2 = $("#state").val();
alert(state2);
})*/
//alert(state2);
$.validator.setDefaults({
errorClass: 'help-block',
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
})
$.validator.addMethod('strongPassword', function (value, element) {
return this.optional(element) || value.length >= 6
// && /\d/.test(value) && /[a-z]/i.test(value);
}, 'Your password must be at least 6 characters long');//'Your password must be at least 6 characters long, contain at least on e number and a character');
//The method for all select options
$.validator.addMethod('checkSelect', function (value, element) {
return this.optional(element) || (value != "Please choose...")
// && /\d/.test(value) && /[a-z]/i.test(value);
}, 'You must select an option');//'Your password must be at least 6 characters long, contain at least on e number and a character');
$("form").validate({
rules: {
firstname: {
required: true,
nowhitespace: true,
lettersonly: true
},
lastname: {
required: true,
nowhitespace: true,
lettersonly: true
},
phone: {
required: true,
},
storename: {
required: true
},
state: {
required: true,
checkSelect: true
},
lga: {
required: true,
checkSelect: true
},
address: {
required: true,
},
category: {
required: true,
checkSelect: true
},
description: {
required: true,
lettersonly: true
},
email: {
required: true,
email: true
},
password: {
required: true,
strongPassword: true
},
password2: {
required: true,
equalTo: "#password"
}
},
messages: {
firstname: {
required: 'Please enter your first name',
nowhitespace: 'Please enter a valid first name',
lettersonly: 'Please enter only alphabets'
},
lastname: {
required: 'Please enter your first name',
nowhitespace: 'Please enter a valid last name',
lettersonly: 'Please enter only alphabets'
},
phone: {
required: "Please enter a valid phone no"
},
storename: {
required: "Please enter the name of your store"
},
address: {
required: "Please enter the address of your store"
},
description: {
required: "Briefly descibe what you sell or do"
},
email: {
required: 'Please enter your email address',
email: "Please enter a valid email address"
},
password: {
required: 'Please enter your password',
strongPassword: "Your password is not strong enough"
},
password2: {
required: 'Please enter your password',
equalTo: "Both passwords don't match"
}
}
});
/*if($("#personal-form").valid() == true)
{
$("#first-next").removeClass("disabled");
alert($("#personal-form").valid());
}*/
if ($("#first-next").click(function () {
if ($("#personal-form :input").valid() == true) {
//$("#first-next").removeClass("disabled");
//alert($("#personal-form").valid());
$("#personal-form").hide();
$("#store-form").fadeIn();
$("#account-form").hide();
//$("#error-msg").html("");
}
else {
//$("#error-msg").html("Please correct all errors before clicking next");
}
}));
/*$("#firstname").on('change', function() {
if($("#firstname").valid() == true)
{
console.log("test");
alert("It worked");
}
});*/
//$('#firstname').on('input', function()
//{
//var firstname = $("#firstname").val();
//alert(firstname);
//alert("hello");
//console.log("test");
//alert("You just typed something in the firstname field");
//});
if ($("#second-next").click(function () {
if ($("#store-form :input").valid() == true) {
//$("#first-next").removeClass("disabled");
//alert($("#personal-form").valid());
$("#personal-form").hide();
$("#store-form").hide();
$("#account-form").fadeIn();
//$("#error-msg").html("");
}
else {
//$("#error-msg").html("Please correct all errors before clicking next");
}
}));
if ($("#first-previous").click(function () {
$("#personal-form").fadeIn();
$("#store-form").hide();
$("#account-form").hide();
//$("#error-msg").html("");
}));
$("#email").on('input', function () {
if ($("#email").valid() == true) {
//console.log("test");
//alert("It worked");
var email = $("#email").val();
$("#check-email-server").load('php/check_email.php', { "email": email });
}
});
$("#email").on('focusout', function () {
if ($("#email").valid() == true) {
//console.log("test");
//alert("It worked");
var email = $("#email").val();
$("#check-email-server").load('php/check_email.php', { "email": email });
}
});
if ($("#second-previous").click(function () {
$("#personal-form").hide();
$("#store-form").fadeIn();
$("#account-form").hide();
//$("#error-msg").html("");
}));
});
I have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}
I used jQuery validation plugin to validate form fields. Now I want to send an ajax request only if the fields are valid, which means after jQuery validation plugin succeed.
JavaScript:
$(function(){
$("#form").validate({
errorPlacement: function(label, element) {
label.addClass('arrow');
label.insertAfter(element);
},
wrapper: 'span',
rules: {
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 6
},
rePassword:{
required: true,
minlength: 6,
equalTo: "#password"
},
birthDate:{
required: true
},
aboutYou:{
required: true
}
},
messages:{
email: {
required: "this field is required!",
email: "please enter a valid email!"
},
name:{
required: "this field is required!",
minlength: "name needs to have at least 5 chars!"
},
password:{
required: "password is required!",
minlength: "password needs to have at least 6 chars!"
},
rePassword:{
required: "rePassword is required!",
minlength: "rePassword needs to have at least 6 chars!",
equalTo: "passwords don't match!"
}
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<meta charset="utf-8">
<script src="includes/jquery-1.11.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/registerForm.js"></script>
<?php
require_once'includes/DAL.php';
?>
<script>
$(function(){
$( "#form" ).submit(function(){
// run this code only if validation plugin succeed?
$.ajax({
method: "post",
url: "API.php",
data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
success: function(result){$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<form method="post" id="form">
<label>Email</label><br/>
<input type="text" name="email" id="email" placeholder="Enter your email"/><br/>
<label>Name</label><br/>
<input type="text" name="name" id="name" placeholder="Enter your name"/><br/>
<label>Password</label><br/>
<input type="password" name="password" id="password" placeholder="Enter your password"/><br/>
<label>re-Password</label><br/>
<input type="password" name="rePassword" id="rePassword" placeholder="Repeat password"/><br/>
<label>Birth Date</label><br/>
<input type="date" name="birthDate" id="birthDate"/><br/>
<label>About yourself</label><br/>
<textarea name="aboutYou" id="aboutYou" placeholder="About yourself..."></textarea>
<input type="submit" id="submit" value="Register!"/>
<div id="div1"></div>
</form>
</body>
</html>
im guessing you are using the following plugin: http://jqueryvalidation.org/documentation/
And what you are looking for is probably this:
submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
So you can do something like this
$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
API docs: http://jqueryvalidation.org/validate
======================
If that's not the plugin that you are using, look for something like this:
"Callback for handling the actual submit when the form is valid." in the plugin API docs. It's definitely gonna be implemented as a callback or a promise object.
Append function(errors, event) to your initail validator plugin script.
$(function(){
$("#form").validate({
errorPlacement: function(label, element) {
label.addClass('arrow');
label.insertAfter(element);
},
wrapper: 'span',
rules: {
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 6
},
rePassword:{
required: true,
minlength: 6,
equalTo: "#password"
},
birthDate:{
required: true
},
aboutYou:{
required: true
}
},
messages:{
email: {
required: "this field is required!",
email: "please enter a valid email!"
},
name:{
required: "this field is required!",
minlength: "name needs to have at least 5 chars!"
},
password:{
required: "password is required!",
minlength: "password needs to have at least 6 chars!"
},
rePassword:{
required: "rePassword is required!",
minlength: "rePassword needs to have at least 6 chars!",
equalTo: "passwords don't match!"
}
},
function(errors, event) {
if (!errors.length) _submit();
}
});
});
function _submit() {
$( "#form" ).submit(function(){
$.ajax({
method: "post",
url: "API.php",
data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
success: function(result){$("#div1").html(result);
}});
});
}
I validate my form using jquery validate like this:
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
required: true,
minlength: 8
},
accountpassword2: {
required: true,
minlength: 8,
equalTo: "#accountpassword1"
},
},
});
HTML:
<input id="accountpassword1" class="text-input form-control" type="text" name="accountpassword1" size="24" placeholder="password" >
<input class="text-input form-control" type="text" name="accountpassword2" size="24" placeholder="password" >
this worked for me But. I need to check jquery validate when password1 and password 2 not empty. my mean is if password input is empty jquery validate not validate field else validate field password1 and password2.
how do create this?
NOTE:: i need to only check validate accountpassword1 and accountpassword1 with this method.
You can use the depends option like
function isPasswordPresent() {
return $('#accountpassword1').val().length > 0;
}
$("#formuser").validate({
rules: {
accountname: {
required: true,
minlength: 6
},
T1: {
required: true,
minlength: 6
},
accountpassword1: {
//required: true is not required
minlength: {
depends: isPasswordPresent,
param: 8
}
},
accountpassword2: {
required: isPasswordPresent,
minlength: {
depends: isPasswordPresent,
param: 8
},
equalTo: {
depends: isPasswordPresent,
param: "#accountpassword1"
}
},
},
});
Demo: Fiddle
I had the same requirement So I used this code
$.validator.addMethod(
"regex",
function(value, element, regexp){
return this.optional(element) || regexp.test(value);
},
"Please check your input.");
$('#registration').validate({
rules: {
first_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
},
last_name: {
required: true , regex: /([-a-zA-Z0-9]|\0)/
}
},
errorPlacement: function(){
return false;
},
submitHandler: function (form){
alert('sucess')
return false;
}
});
its working for me. Hope it helps
My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?
Here is fiddle link http://jsfiddle.net/2L6xT/
BAsically here is my jquery validation code
$(document).ready(function () {
<!-- validation -->
$('#submitDetails').validate({
// 1. validation rules.
rules: {
firstName: {
required: true,
maxlength: 120
},
lastName:{
required: true,
maxlength: 120
},
custom1: {
required: true,
maxlength: 120
},
state: {
required: true
},
custom9: {
required: true
},
email: {
required: true,
email: true
}
},
// 2. Validation fail messages
messages: {
custom9: {
required: "You must agree to the terms of conditions in order to participate."
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "custom9" )
error.appendTo("#error_msg");
else
error.insertAfter(element);
}
});
///execute when submit button is clicked
$("#submit").click(function () {
});
});
In your html, the input element doesnot have name, the validator framework uses name to apply the rules
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />
so along with id add name also(id is not required if it is not used elsewhere)
Demo: Fiddle