I have the following content of a form.
<form id="edit-form" action="" method="post">
<div class="row">
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_first_name">First Name:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-first_name" maxlength="150" name="customer-first_name" type="text" value="Neville">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_middle_name">Middle Name:</label>
<input class="form-control input-sm" id="id_customer-middle_name" maxlength="150" name="customer-middle_name" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_last_name">Last Name:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-last_name" maxlength="200" name="customer-last_name" type="text" value="Sarginson">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_telephone">Telephone:<span class="help-inline"> *</span></label>
<input class="form-control input-sm" id="id_customer-telephone" maxlength="25" name="customer-telephone" placeholder="(XXX) XXX-XXXX" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_mobile">Mobile No:</label>
<input class="form-control input-sm" id="id_customer-mobile" maxlength="25" name="customer-mobile" type="text">
</div>
<div class="form-group col-md-2 col-xs-2 col-lg-2">
<label for="id_work_phone">Work Phone No:</label>
<input class="form-control input-sm" id="id_customer-work_phone" maxlength="25" name="customer-work_phone" type="text">
</div>
</div>
</form>
I use jquery validation plugin to validate the inputs of the form in the following way.
$('#edit-form').validate({
/* #validation states + elements
------------------------------------------- */
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
/* #validation rules
------------------------------------------ */
rules: {
"customer-first_name": {
required: true
},
"customer-last_name": {
required: true
},
"customer-email": {
required: true,
email: true
},
"customer-telephone": {
required: true
}
},
/* #validation error messages
---------------------------------------------- */
messages:{
"customer-first_name": {
required: 'Enter first name'
},
"customer-last_name": {
required: 'Enter last name'
},
"customer-email": {
required: 'Enter email address',
email: 'Enter a VALID email address'
},
"customer-telephone": {
required: 'Enter patient\'s telephone number'
}
},
/* #validation highlighting + error placement
---------------------------------------------------- */
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
}
});
The proper js library is included but still it won't validate. Am I doing something wrong?
Yes, correct, you must surround complex names with quotes.
However, your code, as you've presented it to us, is working: http://jsfiddle.net/7pmc6q9c/
....
rules: {
"customer-first_name": {
required: true
},
"customer-last_name": {
required: true
},
"customer-email": {
required: true,
email: true
},
"customer-telephone": {
required: true
}
},
....
Your customer-first_name and customer-last_name fields already have values set in the HTML so there is nothing to validate unless the user blanks them out.
Your customer-email field does not exist in the HTML so validation ignores it.
Your customer-telephone field is being validated exactly as you've specified.
Related
When I am calling submithandler in validation rules, I want to call post function to submit the form but it's not firing.
Below is my code
$(function() {
$.validator.addMethod("time", function(value, element) {
return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
}, "Please enter a valid time (24 Hour Format).");
//^(([0-1]?[0-2])|([2][0-3])):([0-5]?[0-9])(a|p)m?$ 12 hour
// /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i 24 hour
// alert($(#isNoOfExecutionSet").val());
jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#form').validate({
rules: {
full_name: {
required: true,
minlength: 3,
maxlength: 100
// email: true
},
short_name: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
password: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
total_branches: {
required: true,
number: true
// email: true
},
confirm: {
equalTo: "#password"
},
submitHandler: function(form) {
alert('jj');
}
}
});
}); // end of function
below is my html code
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<h2> Institute Info</h2>
<form role="form" method="post" id="form">
<hr class="colorgraph">
<p style="color:#f0776c;float:left" id="msg"></p>
<div class="form-group">
<input type="text" class="form-control input-lg" id="full_name" name="full_name" type="full_name" value="saljdf" placeholder="Enter Full Name">
</div>
<div class="form-group">
<input type="tet" class="form-control input-lg" id="short_name" name="short_name" type="short_name" value="saljdf" placeholder="Enter Short Name">
</div>
<div class="form-group">
<input type="number" class="form-control input-lg" id="total_branches" name="total_branches" value="12" type="total_branches" placeholder="Enter Total Branches Allowed">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="password" name="password" type="password" value="123" placeholder="Enter Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="confirm" name="confirm" type="password" value="saljdf" placeholder="Confirm Password">
</div>
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Active" >Active</option>
<option value="Non-Active" >Non-Active</option>
</select>
</div>
<hr class="colorgraph">
<div class="row">
<!--<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>-->
<div class="col-xs-12 "><button type="submit" class="btn btn-lg btn-primary btn-block" name="btnsave" value="btnsave" id="btnsave">Create Institute</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You mean ajax call i.e jquery post method.
You can write ajax call withun function and whenever your form valiate successfully call the same ajax function from that loop/conditional statement.
Like.
function myFunction(){
// JQuery post method i.e Ajax call
}
$("form"). submit(function(){
// validation cade
if(validate){
myFunction();
}
});
This is no exact code, I just try to suggest the solution it works for me in many projects you can try.
I'm trying out a new plugin which is called jquery.validation.js and it seems that after I try to apply them it doesn't work. Can someone kindly help me on this?
Here's the page.html
<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname"/>
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone#example.com" id="email">
</div>
</div>
<!-- End .form-group -->
</form>
div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button name="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" id="cancel" class="btn btn-default pad">Cancel</button>
</div>
</div>
Here's what the angular.controller.js looks
function AddCustomerController($scope, $location, $rootScope, $http, CustService) {
(function initController() {
})();
$scope.AddCustomer = function () {
var CustomerDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustomerDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
$scope.CusDetails = {};
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer. Please retry.',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
}
And finally the validation.js for validating above form
$(document).ready(function () {
$("#CustomerDetails").validate({
debug:true,
errorPlacement: function (error, element) {
var place = element.closest('.input-group');
if (!place.get(0)) {
place = element;
}
if (error.text() !== '') {
place.after(error);
}
},
errorClass: 'help-block',
rules: {
cname: {
required: true,
},
comname: {
required: true
},
ctel: {
required: true,
min: 10
},
email: {
required: true,
email: true
}
},
messages: {
cname: {
required: "Please enter customer name!"
},
comname: {
required: "Please enter company name!"
},
ctel: {
required: "Please enter telephone number",
minlength: "Telephone number should be atleast 10 digits"
}
},
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
$(label).closest('.form-group').removeClass('has-error');
label.remove();
}
});
});
The error from debuggging from the built in function in validation says:
Nothing selected, can't validate, returning nothing.
What am I doing wrong? Why isn't the validation.js isn't getting called?
Help would be greatly appreciated.
I am developing a registration form for a project I am working on. The project uses Bootstrap and jQuery to control form validation and I am using the validate plugin. This is setup in an ASP.NET MVC 4 Web application using C#. I have all my bundles and routing properly configured, but am having no luck with getting messages to display on the form.
Here is the form:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
Here is the JavaScript:
$(document).ready(function () {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function(element){
$(element).closest('.form-control').removeClass('success').addClass('error');
},
success: function(element){
element.text('OK!').addClass('valid')
.closest('.form-control').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});
Properties like messages, highlight are not sub properties of rules
jQuery(function ($) {
$('#formRegister').validate({
rules: {
textFirstName: {
required: true,
minlength: 1,
maxlength: 50
},
textLastName: {
required: false,
maxlength: 50
},
textEmail: {
required: true,
email: true
},
textEmail2: {
required: true,
email: true,
equalTo: '#textEmail'
},
passwordPW1: {
required: true,
minlength: 4
},
passwordPW2: {
required: true,
equalTo: '#passwordPW1'
}
},
messages: {
textFirstName: "The first name must be from 1 to 50 characters in length",
textLastName: "The last name must be from 0 to 50 characters in length",
textEmail: "Please enter a valid email address",
textEmail2: "Emails do not match",
passwordPW1: "The password must be from 4 to 50 characters in length",
passwordPW2: "Passwords do not match"
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
},
submitHandler: function (form) {
form.submit();
}
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
<div class="form-group">
<label for="textFirstName" class="control-label col-xs-4">First name</label>
<div class="col-xs-8">
<input type="text" name="textFirstName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textLastName" class="control-label col-xs-4">Last name</label>
<div class="col-xs-8">
<input type="text" name="textLastName" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail" class="control-label col-xs-4">Email</label>
<div class="col-xs-8">
<input type="text" name="textEmail" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
<div class="col-xs-8">
<input type="text" name="textEmail2" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW1" class="control-label col-xs-4">Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW1" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
<div class="col-xs-8">
<input type="password" name="passwordPW2" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="btn-group col-xs-offset-4 col-xs-10">
<button type="reset" class="btn btn-info">Clear</button>
<button type="submit" class="btn btn-info">Submit</button>
</div>
</div>
</form>
You need to add a messages container so the messages can be shown somewhere.
Add:
container: '#messages',
on your js function just before the feedbackIcons and
<div class="form-group">
<div id="messages"></div>
</div>
So basically, when the form is valid it should link to a new page that says success. that part works fine.
However if the form is invalid the form still submits, specifically i noticed as long as the all three fields are filled in the form submits even if the passwords do not match. If one of the fields is left blank then it does not submit (as it should)
Is there a problem with my validate function i am not seeing or is it in the bootstrap?
demo The demo submits on the second click for some reason
jquery validate
$(document).ready(function() {
$('#signin').validate({
rules: {
name: {
required: true,
name: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},
messages: {
name: {
required: "Please supply a Username."
},
password: {
required: 'Please type a password',
rangelength: 'Password must be between 8 and 12 characters long.'
},
confirmPassword: {
equalTo: 'The passwords do not match.'
}
},
});
});
HTML
<div class="container">
<div class="col-lg-6">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-horizontal required" action="success.html" method="get" name="signin" id="signin" role="form">
<div class="form-group">
<label for="inputUsername" class=" required col-lg-2 control-label">UserName</label>
<div class="col-lg-5">
<input name="name" type="text" class="form-control" id="username" placeholder="Username"required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class=" required col-lg-2 control-label">Password</label>
<div class="col-lg-5">
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-lg-2 control-label">Confirm Password</label>
<div class="col-lg-5">
<input name="confirmPassword" type="password" class="form-control" id="confirmPassword" placeholder=" Retype Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submit" id="submit" class="btn btn-default">SignIn</button>
</div>
</div>
</div>
</form>
Ok, you need to remove the extraneous name param.
name: {
required: true
, name: true
},
RULES:
:rules: {
name: {
required: true
},
password: {
required: true,
rangelength:[8,12]
},
confirmPassword: {equalTo:'#password'},
spam: "required"
},
I've developed a form with multiple fieldsets to represent steps in filling out the complete form. The fieldsets are shown and hidden by button click (one on each fieldset) but I want to validate each fieldset before the next is shown.
I'm new to JQuery and I'm having a bit of trouble. I found this guide ( http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/) that allows me to validate different fieldsets independently but my problem is how do I use that validation to control the showing and hiding of the relevent fieldsets.
I thought the way to do this would be to create a function from each click event for the buttons but I can't seem to call the validate function correctly.
I'm afraid I'm completely confused now! Help!!
I stumbled across this example just before finding your question while googling something else, hoping this will help someone with the same problem:
https://djaodjin.com/blog/jquery-multi-step-validation.blog.html
Basically, apparently validation.js only validates the visible fields by default.
Here's the full example code, click through to the link to see the explanation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multiple step form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<style type="text/css">
#personal_information,
#company_information{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-5">
<form class="form-horizontal" action="" method="POST" id="myform">
<fieldset id="account_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="company_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="company" class="col-lg-4 control-label">Company</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="company" name="company" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="url" class="col-lg-4 control-label">Website url</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="url" name="url" placeholder="Website url">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="personal_information" class="">
<legend>Personal information</legend>
<div class="form-group">
<label for="name" class="col-lg-4 control-label">Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<p><a class="btn btn-primary" id="previous" >Previous</a></p>
<p><input class="btn btn-success" type="submit" value="submit"></p>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".next").click(function(){
var form = $("#myform");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
username: {
required: true,
usernameRegex: true,
minlength: 6,
},
password : {
required: true,
},
conf_password : {
required: true,
equalTo: '#password',
},
company:{
required: true,
},
url:{
required: true,
},
name: {
required: true,
minlength: 3,
},
email: {
required: true,
minlength: 3,
},
},
messages: {
username: {
required: "Username required",
},
password : {
required: "Password required",
},
conf_password : {
required: "Password required",
equalTo: "Password don't match",
},
name: {
required: "Name required",
},
email: {
required: "Email required",
},
}
});
if (form.valid() === true){
if ($('#account_information').is(":visible")){
current_fs = $('#account_information');
next_fs = $('#company_information');
}else if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#personal_information');
}
next_fs.show();
current_fs.hide();
}
});
$('#previous').click(function(){
if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#account_information');
}else if ($('#personal_information').is(":visible")){
current_fs = $('#personal_information');
next_fs = $('#company_information');
}
next_fs.show();
current_fs.hide();
});
});
</script>
</body>
</html>
You can write a custom validation function for each fieldset and call it using the .keyup function. Here is an example:
HTML:
<div id="fieldset1">
<input type="text" name="fname" id="fname">
</div>
<div id="fieldset2">
<!--hidden using css-->
<input type="text" name="fname" id="fname">
</div>
Javascript:
$('#fieldset1 #fname').keyup(function () {
// Runs every time your keystroke is released on this input
if($(this).val() == 'Adam') {
// Checks to see if the field's value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it.
$('#fieldset2').show();
} else {
$('#fieldset2').hide();
}
}
This is obviously meant as a very simple example, but it illustrates what you will need to do in order to validate your form and modify the DOM based on user input.
Using jQuery validation plugin you can get around this by having multiple forms in the same page. You can then call:
$('#myFormId').validate()
on the forms of interest one at the time.