javascript - display user end error before submitting a form -
i have form through wish add values in database. working fine, validation have added server end validation, errors if displayed after form has been submitted, wish use user end validation in way if user not enter field, not entering proper format or password not match, error should displayed simultaneously i.e before hitting submit button. can tell how can done
<?php if ($_server["request_method"] == "post") { if (empty($_post["email"])) { $emailerr = "email required"; } else { $email =$_post["email"]; } if (empty($_post["password"])) { $pswrderr = "password required"; } else { $password = $_post["password"]; } if ($_post["password"]!=$_post["retype_password"]) { $pswrderr = "password not match"; } else { $password = $_post["password"]; } //insert query add values in database } ?> <form name="form" action="<?php echo htmlspecialchars($_server["php_self"]);?>" method="post" > <input type="text" placeholder="name" name="name"/> <input type="email" placeholder="email" name="email"/> <input type="password" placeholder="password" name="password"/> <input type="password" placeholder="retype password" name="retype_password"/> <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">register</button> </form>
you can try
<!doctype html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <?php if ($_server["request_method"] == "post") { if (empty($_post["email"])) { $emailerr = "email required"; } else { $email =$_post["email"]; } if (empty($_post["password"])) { $pswrderr = "password required"; } else { $password = $_post["password"]; } if ($_post["password"]!=$_post["retype_password"]) { $pswrderr = "password not match"; } else { $password = $_post["password"]; } //insert query add values in database } ?> <form name="form" id="register-form" action="<?php echo htmlspecialchars($_server["php_self"]);?>" method="post" > <input type="text" placeholder="name" name="name"/> <input type="email" placeholder="email" name="email"/> <input type="password" placeholder="password" name="password" id="password"/> <input type="password" placeholder="retype password" name="retype_password" id="retype_password"/> <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">register</button> </form> <script> (function($,w,d) { var jquery4u = {}; jquery4u.util = { setupformvalidation: function() { //form validation rules $("#register-form").validate({ rules: { name: "required", email: { required: true, email: true }, password: { required: true, minlength: 5, }, retype_password: { equalto :'#password' } }, messages: { name: "please enter name", password: { required: "please provide password", minlength: "your password must @ least 5 characters long", }, email: "please enter valid email address", agree: "please accept our policy" }, submithandler: function(form) { form.submit(); } }); } } //when dom has loaded setup form validation rules $(d).ready(function($) { jquery4u.util.setupformvalidation(); }); })(jquery, window, document); </script> </body> </html> 
Comments
Post a Comment