Validate Form Fields With NO Code Skills - jQuery SimpleValidation

SimpleValidation is a lightweight jQuery plugin that provides a simple way to validate form fields on the client side. It allows you to apply validation rules to form fields easily via HTML data-sfv-* attributes. This makes it perfect for web development beginners who want to ensure their forms are filled out correctly without writing a lot of code.

The plugin comes with a set of predefined validation rules, such as email, alphabetic, numeric, alphanumeric, etc. to validate common input types. Moreover, it also offers flexibility by allowing you to define custom regular expressions for specific validation scenarios.

How to use it:

1. Download and place the minified version of the SimpleValidation plugin after the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/simplevalidation.min.js"></script>

2. Apply validation rules by adding the data-sfv-* attribute to your form fields as follows.

• data-sfv-ajax="true": If is an AJAX form
• data-sfv-required="yes": If is a Required field
• data-sfv-validation="email": Validate email address
• data-sfv-validation="alpha": Vlidate alphabetic
• data-sfv-validation="alphawithspace": Validate alphabetic with space
• data-sfv-validation="number": Validate number
• data-sfv-validation="numberwithspace": Validate number with space
• data-sfv-validation="alphanumeric": Validate alphanumeric
• data-sfv-validation="alphanumericwithspace": Validate alphanumeric with space
• data-sfv-compare: Compare two form fields
• data-sfv-minlength: Min length
• data-sfv-require-errorMsg: Custom error message for Required fields
• data-sfv-regex: Validate the form field using custom regular expression
• data-sfv-regEx-errorMsg: Custom error message for Regex fields

<form class="form-horizontal validationdemoform" action="#" data-sfv-minlength="2" id="myForm">
  <div class="form-group">
    <label for="inputFirstname" class="control-label">First name
      <abbr title="required">*</abbr>
    </label>
    <input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="3" id="inputfirstname">
  </div>
  <div class="form-group">
    <label for="inputLastname" class="control-label">Last name
      <abbr title="required">*</abbr>
    </label>
    <input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="1" id="inputlastname">
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email
      <abbr title="required">*</abbr>
    </label>
    <input type="email" data-sfv-required="yes" class="form-control" id="inputemail">
  </div>
  <div class="form-group">
    <label for="inputPhone" class="control-label">Phone
      <abbr title="required">*</abbr>
    </label>
    <input type="text" data-sfv-required="yes" class="form-control"
      data-sfv-regEx="[+]\d{2}[(]\d{2}[)]\d{4}[-]\d{4}" data-sfv-regEx-errorMsg="Please enter valid Phone no"
      placeholder="+99(99)9999-9999" id="inputphone">
  </div>
  <div class="form-group">
    <label for="inputStreet" class="control-label">Street
      <abbr title="required">*</abbr>
    </label>
    <input type="text" data-sfv-required="yes" class="form-control" data-sfv-minlength="null" id="inputstreet">
  </div>
  <div class="form-group">
    <label for="inputCity" class="control-label">City
      <abbr title="required">*</abbr>
    </label>
    <input type="text" data-sfv-required="yes" class="form-control" id="inputcity">
  </div>
  <div class="form-group">
    <label for="inputCountry" data-sfv-required="yes" class="control-label">Country
      <abbr title="required">*</abbr>
    </label>
    <select name="" data-sfv-required="yes" class="form-control" id="inputcountry">
      <option value="">Select Country</option>
      <option value="US">United States</option>
      <option value="IN">India</option>
    </select>
  </div>
  <div class="form-group">
    <label for="inputWebsite" class="control-label">Website</label>
    <input type="text" class="form-control" id="inputwebsite">
  </div>
  <div class="form-group gender">
    <label class="control-label">Sex
      <abbr title="required">*</abbr> :
    </label>
    <div class="radio">
      <label>
        <input type="radio" data-sfv-required="yes" name="gender" id="optionsRadios1" value="Male"> Male
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" data-sfv-required="yes" name="gender" id="optionsRadios2" value="Female"> Female
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="checkbox terms_cond">
      <input type="checkbox" name="t&c" id="t&c" data-sfv-required="yes"
        data-sfv-require-errorMsg="Please accept terms & condition">
      <label for="t&c">
        <abbr title="required">*</abbr> I accept the Terms and Conditions</label>
    </div>
  </div>
  <div class="form-group submit">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

3. Customize the form validator using the following options:

$("#myForm").simpleValidation({
  errorFieldClass: "error",
  errorMsgTag: "span",
  errorMsgClass: "errormsg",
  errorMsg: "Required Field",
  otherErrorMsg: {
    email: "Please enter a valid email",
    companyemail: "Please enter a company email",
    alphabet: "Please enter letters only",
    alphabetwithspace: "Please enter letters and spaces only",
    number: "Please enter numbers only",
    numberwithspace: "Please enter numbers and spaces only",
    alphanumeric: "Please don't enter any special characters or spaces",
    alphanumericwithspace: "Please don't enter any special characters",
    compare: "Please enter the same value again",
    minlength: "Please enter a minimum of {n} letters",
  },
  beforeSubmit: : function(form) {
    // do something
  }
});

4. For forms using AJAX, you can define a callback to handle the response after submission::

$("#myForm").simpleValidation({
  // options here
},function(data,form) {
  if(data == "succcess") {
    // do something
  }
});

---

This awesome jQuery plugin is developed by Position2. For more Advanced Usages, please check the demo page or visit the official website.