Question

I know there are tons of information out there over internet to validate form in JavaScript and JQuery. But I’m interested to write my own. Basically I want to learn this thing.

So here is my validation script I have written and its working fine.

function validate() {

        var firstName = jQuery("#firstName").val();
        var lastName = jQuery("#lastName").val();
        var dateOfBirthy = jQuery().val("dateOfBirth");

        if (firstName.length == 0) {
            addRemoveValidationCSSclass("#firstName", false);
        } else {
            addRemoveValidationCSSclass("#firstName", true);
        }

        if (lastName.length == 0) {
            addRemoveValidationCSSclass("#lastName", false);
        } else {
            addRemoveValidationCSSclass("#lastName", true);
        }
    }

    function addRemoveValidationCSSclass(inputField, isValid) {
        var div = jQuery(inputField).parents("div.control-group");
        if (isValid == false) {
            div.removeClass("success");
            div.addClass("error");
        } else if (isValid == true) {
            div.removeClass("error");
            div.addClass("success");
        } else {
        }
    }

I want to achieve few things–

1. add validation message
2. More generic way to handle for every form.
3. And I want to add validation rule, like length, email validation,
   date validation etc.

Now how can I achieve these?

Answer 1

I did something similar to this, except that I wrote my rules in PHP since you need a server-side backup. When the PHP generates the form, it also generates some simple client-side validation that looks like this:

<!-- html field -->
<label for="first">
  First Name: <input type="text" name="first" id="first">
  <span id="first_message"></span>
</label>

Then the script is like this:

<script>
  var formValid = true;
  var fieldValid = true;

  // Check first name
  fieldValid = doRequiredCheck("first");
  if (!fieldValid) {formValid = false};
  fieldValid = doCheckLength("first", 25);
  if (!fieldValid) {formValid = false};

  function doRequiredCheck(id) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value === "") {
      box.innerHTML = "**REQUIRED**";
    }
  }

  function doCheckLength(id,len) {
    var el = document.getElementById(id);
    var box = document.getElementById(id + "_message";
    if (el.value.length > len) {
      box.innerHTML = "Too long";
    }
  }
</script>