Geek Answers Handbook

JQuery Validating Single Fields

I designed a form with several fields to represent the steps when filling out the full form. The field sets are displayed and hidden by clicking the button (one on each field set), but I want to check each field set before the following is shown.

I am new to jQuery and am having problems. I found this guide ( http://encosia.com/2009/11/24/asp-net-webforms-validation-groups-with-jquery-validation/ ), which allows me to check the various fields separately, but my problem is how to use this check to control the display and hide the corresponding fields.

I thought that for this you need to create a function from each click event for the buttons, but I cannot correctly call the check function.

I'm afraid I'm completely confused now! Help!!

+7
javascript jquery validation
source share
3 answers

You can write a custom validation function for each set of fields 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 value is Adam. If it is, then it shows the next fieldset. Otherwise it hides it. $('#fieldset2').show(); } else { $('#fieldset2').hide(); } }

This obviously means a very simple example, but it illustrates what you will need to do to validate your form and change the DOM based on user input.

+1
source share

Using the jQuery validation plugin , you can get around this by having multiple forms on the same page. You may call:

$ ('# myFormId'). Confirmations ()

in the forms we are interested in.

+1
source share

I came across this example before finding your question while searching for something else, hoping this helps someone with the same problem:

https://djaodjin.com/blog/jquery-multi-step-validation.blog.html

Basically, obviously, validation.js checks for visible fields by default.

Here is a complete code example, click on the link to see an 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>
+1
source share

More articles:


All Articles