CODEWITHSUNDEEP
javascriptjqueryformsvalidation
user864600
user864600

Reputation: 423

javascript form validation

I'm making a website with lots of forms. I'm trying to make my codes efficient & flexible using Javascript form validation. I want to display error message next to each fields in the forms when not correctly entered.

Problems: 1. function "chkfrmRegister" is not working 2. elem.value IS working when "chkfrmRegister" is commented out. 3. cannot tab through fields when there's a field not correctly entered. 4. when submit, error messages doesn't appear next to the fields that wasn't correctly entered (guess it's because "chkfrmRegister" is not working that causes this)

Here is a test version of my codes:

HTML

<html>
<head>
<script src="validate.js">
</script>
</head>
<body>
  <form id="frmRegister" method="post" action="">
    <ul>
      <li>
        <label id="lFname" for="lFname">First Name*</label>
        <input id="iFname" name="iFname" class="text" size="38" maxlength="30" onblur="chkAlphabet(iFname, 'Please enter letters only')" />
      </li>
      <li><input id="iFnameMsg" class="errorStr" /></li>
      <li>
        <label id="lLname" for="lLname">Last Name*</label>
        <input id="iLname" name="iLname" class="text" size="38" maxlength="20" onblur="chkAlphabet(iLname, 'Please enter alphabets only')" />
      </li>
      <li><input id="iLnameMsg" class="errorStr" /></li>
      <li>
        <label id="lEmail" for="lEmail">Email*</label>
        <input id="iEmail" name="iEmail" class="text" size="38" maxlength="30" onblur="chkEmail(iEmail, 'Please enter a valid e-mail')" />
      </li>
      <li><input id="iEmailMsg" class="errorStr" /></li>
      <li>
        <label id="lContactNo" for="lContactNo">Contact No.*</label>
        <input id="iContactNo" name="iContactNo" class="text" size="38" maxlength="16" onblur="chkNumeric(iContactNo, 'Please enter numbers only')" />
      </li>
      <li><input id="iContactNoMsg" class="errorStr" /></li>
      <li><br />
      </li>
      <li>
        <!--<input type='submit' onclick="chkfrmRegister()" value='Register' />-->
        <input type='submit' value='Register' />
      </li>
    </ul>
  </form>
</body>
</html>

JAVASCRIPT

function chkfrmRegister(){
    var firstname = $("#iFname");
    var lastname = $("#iLname");
    var email = $("#iEmail");
    var contactno = $("#iContactNo");

    // Check each input in the order that it appears in the form!
    if(chkAlphabet(firstname, "Please enter letters only")){
        if(chkAlphabet(lastname, "Please enter letters only")){
            if(chkEmail(email, "Please enter a valid email address")){
                if(chkNumeric(contactno, "Please enter numbers only. No space or special characters")){
                    return true;
                }
            }
        }
    }

    return false;   
}

function chkAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function chkNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function chkEmail(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

What am I missing here? Can someone please advise? Thanks!

Upvotes: 0

Views: 1032

Answers (4)

archil
archil

Reputation: 39501

Honestly, you are trying to reinvent the wheel. There're lots of jQuery validation plugins that implement all the functionality you need. Plus, they give more user-friendly UI updates than you are trying to achieve - give the user chance to fill in the right values before showing errors. One of these validation plugins is jQuery validation plugin. This is the one that ASP.NET MVC framework uses by default, and is definitely well developed and documented.

And if you still want to continue developing your code, the problem is in that you are using 

elem.value

in your validation methods. elem is jQuery object and does not contain definition for value. Instead, in all of your validation functions, you should write

elem.val()

and your code will start working

Upvotes: 3

zhzhzhh
zhzhzhh

Reputation: 64

You better try a validationEngine to resolve your problem~~~likevalidationEngine

Upvotes: 1

rkw
rkw

Reputation: 7297

There are great validation techniques out there for jquery; I would highly recommend one of those.

If you still prefer creating your own, you might want to apply some of these techniques.

  • $('form').bind('submit', fncValidateSubmit) // hook onto the submit function
  • fncValidateSubmit
    • make sure you check an attribute on the form to see if validation should take place, this way it can be switched off
    • $(this).filter('input... other elements').each(fncValidate); // validate all the editable elements
  • fncValidate()
    • $(this).attr('validationType'); // include the val type as an attribute when you render the element
    • // validate the element based on the type and add a label element dynamically next to the element that fails validation
      • return false as soon as one fails

Then you just need to create validation rules for each type; you should also include customValidation so the programmer can add their own regex validation.

If you want more features, you can slowly add them in... but at that point, you might as well use one of the pre-made packages.

Upvotes: 0

Anantha Sharma
Anantha Sharma

Reputation: 10108

if you are beginning with this then its advisable for you to look at jQuery, it has a form validation plugin which is very good.

here is an article on jQuery form validation

Upvotes: 1

Related Questions