Validate Your Forms Using jQuery

My form is more complex than the demo - and I'm in over my head with implementing the validation in this instance. For example, in the demo, the errors are coming inline the form element. In my case, I want to designate the fields I want validate, create the rules and specify where I want to put errors with a class depending on whether they are errors or not. I'm using the Simple CSS framework.

Ideally, I'd like to be able to change the validation method in the demo as well and substitute one that I'm more familiar with - like below image:


 Main Logic -  script.js                                                                                                                  Download Source Code
  1. <script> $( document ).ready(function( ) { $(".form.c").validate({ rules: { name: { required: true }, stitle: { required: true }, prepared: { required: true }, }, messages: { name: "Please enter a Title", } }); }); </script>

 index.html
  1. <!-- Start Main Container --> <div class="container"> <!-- Left panel --> <div class="cover-leftpanel"> <form class="form c" method="post" action="#"> <div class="form_wrapper"> <label for="name">Title :<i class="italic">( Required )</i></label> <input type="text" id="name" name="name" maxlength="300"/> <div class="both"></div> <label for="stitle">Sub Title :<i class="italic">( Required )</i></label> <input type="text" id="stitle" name="stitle" maxlength="300" /> <div class="both"></div> <label for="prepared">Prepared by :<i class="italic">( Required )</i></label> <input type="text" id="prepared" name="prepared" maxlength="100"/> </div> <button class="nextBtnCls" type="submit" value="Submit"> NEXT ></button> </form> </div> <!-- Navigation --> <div class="both"> </div> </div> <!-- Main Container -->

mockup.css

  1. body { background-color:#e8ebed; color:#333; font:90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; height:100%; margin:0; max-height:100%; padding:0; } div.container { margin: 20px; clear: both; } .btnCls { clear:both; float:right; margin:20px 0 20px 0; } .nextBtnCls { background-color:#06C; border:none; border-radius:3px; color:#FFF; cursor: pointer; margin-left:10px; padding:5px; width:140px; font-weight:bold; margin:5px 0; } .cover-leftpanel { float: left; width: 55%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0px; } .form_wrapper label { display: block; float: left; font: bold 0.8em helvetica; margin-top: 11px; width: 20%; } .form_wrapper input[type="file"]{margin:2px !important;} .form_wrapper input[type="text"] ,.form_wrapper input[type="file"] { border: 1px solid #ccc; background: #FFFFFF; padding: 7px; margin-top: 6px; font-size: 0.9em; width: 50%; -moz-box-shadow: 0px 0px 8px #f0f0f0; -webkit-box-shadow: 0px 0px 8px #f0f0f0; -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari, Chrome */ -khtml-border-radius: 3px; /* KHTML */ border-radius: 3px; /* CSS3 */ behavior: url("border-radius.htc"); } .italic{display:block;font-size:10px;} .form.c {position: relative;} .form.c label.error { color: #FF0000; margin: 0; opacity: 0.9; padding: 10px; position: absolute; text-align: center; margin-top: -36px; margin-left:150px; width: 50%; } .form.c input.error { border: 2px solid #BF3119; background: #F9E9E9; filter: alpha(opacity=40); } .both {clear: both;}

Download source code





Previous
Next Post »