Pages

Saturday, May 25, 2013

javascript validations

There are six main types of validation controls:- 

1.RequiredFieldValidator: It checks whether the control have any value. It's used when you want the control should not be empty.

2.RangeValidator: It checks if the value in validated control is in that specific range.

3.CompareValidator: It checks that the value in controls should match the value in other control.

4.RegularExpressionValidator: When we want the control value should match with a specific regular expression.

5.CustomValidator: It is used to define UserDefined validation.

6.ValidationSummary: It displays summary of all current validation errors.

Code for RequiredFieldValidator:

  <script type='text/javascript'>
   function notEmpty(elem, helperMsg)
   {
    if(elem.value.length == 0)
       {
        alert(helperMsg);
        elem.focus();
        return false;
        }
    return true;
}
</script>
<form>
Required Field: <input type='text' id='req1'/>
<input type='button'
    onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')"
    value='Check Field' />
</form>



Form Validation - Checking for All Numbers:

 <script type='text/javascript'>
function notEmpty(elem, helperMsg)

     {
    if(elem.value.length == 0)

       {
        alert(helperMsg);
        elem.focus();
        return false;
      }
    return true;
}
</script>
<form>
Required Field: <input type='text' id='req1'/>
<input type='button'
    onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')"
    value='Check Field' />
</form>

Form Validation - Checking for All Letters:

 <script type='text/javascript'>
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp))
   {
     return true; 
   }
   else
   {
      alert(helperMsg);
      elem.focus();
      return false;
    }
}
</script>
<form>
Letters Only: <input type='text' id='letters'/>
<input type='button' 
onclick="isAlphabet(document.getElementById('letters'), 'Letters Only Please')"
 value='Check Field' />
</form>

 Note: if u want both number and char then write like var alphaExp = /^[0-9a-zA-Z]+$/;

Form Validation - Restricting the Length:

 <script type='text/javascript'>
function lengthRestriction(elem, min, max)
    {
  var uInput = elem.value;
  if(uInput.length >= min && uInput.length <= max)
      {
    return true;
      }
     else
       {
    alert("Please enter between " +min+ " and " +max+ " characters");
    elem.focus();
    return false;
    }
}
</script>
<form>
Username(6-8 characters): <input type='text' id='restrict'/>
<input type='button'
onclick="lengthRestriction(document.getElementById('restrict'), 6, 8)"
    value='Check Field' />
</form>

 Form Validation - Email Validation:

 <script type='text/javascript'>
function emailValidator(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;
    }
}
</script>
<form>
Email: <input type='text' id='emailer'/>
<input type='button'
 onclick="emailValidator1(document.getElementById('emailer'), 'Not a Valid Email')"
    value='Check Field' />
</form>

No comments:

Post a Comment