var rule = {
  element_12: [
    [/^$/,       'Can not be empty'],
    [/^.$/,      'Must have at least 2 characters'],
    [/.{256,}/,  'Must have at most 255 characters'],
    [/\d/,       'Can not contain digits'],
  ],
  element_13: [
    [/^$/,       'Can not be empty'],
    [/^.{1,2}$/, 'Must have at least 3 characters'],
    [/.{256,}/,  'Must have at most 255 characters'],
  ],
}

function notEmpty(elem)
{
  var errorcontainer = elem;
  var result = true;

  do {
    errorcontainer = errorcontainer.nextSibling;
    if (errorcontainer == null) return result;
  } while (errorcontainer.className != 'errorcontainer');
  errorcontainer.innerHTML = '';

  if (! (elem.name in rule)) return result;

  for (var i = 0, l = rule[elem.name].length; i < l; i++) {
    if (elem.value.match(rule[elem.name][i][0])) {
      errorcontainer.innerHTML += rule[elem.name][i][1] + '<br>';
      result = false;
    }
  }

  return result;
} 

<li id="li_12" >
    <label class="description" for="element_12">First Name <font color="#EC0006">*</font> </label>
    <div>
    <input id="element_12" name="element_12" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(this)"/> <div class="errorcontainer"></div>
    </div> 
    </li>   
    <li id="li_13" >
    <label class="description" for="element_13">Last Name <font color="#EC0006">*</font></label>
    <div>
    <input id="element_13" name="element_13" class="element text large" type="text" maxlength="255" value="" onblur="notEmpty(this)"/> <div class="errorcontainer"></div>
    </div> 
    </li> 

Feherke.
http://feherke.github.com/

• Make another function to trigger all validations and call it onsubmit.
• Make a dedicated function to check radio buttons.
• Move the error container lookup in a separate function so can be used by the

function geterrorcontainer(elem)
{
  do {
    elem = elem.nextSibling;
  } while (elem != null && elem.className != 'errorcontainer');

  return elem;
}

function notEmpty(elem)
{
  if (! (elem.name in rule)) return result;

  var error = '';
  for (var i = 0, l = rule[elem.name].length; i < l; i++)
    if (elem.value.match(rule[elem.name][i][0]))
      error += rule[elem.name][i][1] + '<br>\n';

  geterrorcontainer(elem).innerHTML = error;
  if (error) elem.focus();

  return error == '';
}

function checkradio(form,name)
{
  var checked = false;
  for (var i = 0, l = form.elements[name].length; i < l; i++)
    if (form.elements[name][i].checked)
      checked = true;

  geterrorcontainer(form.elements[name][0]).innerHTML = checked ? '' : 'Must check one';
  if (!checked) form.elements[name][0].focus();

  return checked;
}

function checkform(form)
{
  return (
    checkradio(form,'element_11')
    & notEmpty(form.elements['element_13'])
    & notEmpty(form.element_12)
  ) != 0;
} 

• Each validator function call will set the focus, so checkform() calls them in reverse order so at the end the focus remains on the first invalid input.
• && short circuits the evaluation so only one invalid input would have its error message displayed.
• & does not short circuit, but is arithmetic operator, so its result has to be transformed into boolean.

<form id="form_453570" class="appnitro"  method="post" action="insertform.php" onsubmit="return checkform(this)">

<!-- ... -->

    <div>
      <input id="element_11_1" name="element_11" class="element radio" type="radio" value="1" />
      <label class="choice" for="element_11_1">Male</label>
      <input id="element_11_2" name="element_11" class="element radio" type="radio" value="2" />
      <label class="choice" for="element_11_2">Female</label>
      <div class="errorcontainer"></div>
    </div> 

Feherke.
http://feherke.github.com/

<!-- my -->
<form id="form_453570" class="appnitro"  method="post" action="insertform.php" onsubmit="return checkform(this)">

<!-- your -->
<form id="form_453570" class="appnitro"  name="registration"  method="post" action="insertform.php" onSubmit="formValidation();"> 

Feherke.
http://feherke.github.com/

// your earlier code - return value : undefined
document.getElementById('form_453570').onsubmit=function() { formValidation(this) }

// your latest code - return value : whatever formValidation() returns
document.getElementById('form_453570').onsubmit=function() { return formValidation(this) } 

Feherke.
http://feherke.github.com/

Quote (vishalonne)

still it is showing the email error message not moving on next page.

• The error message does not disappear because nothing removes it. The cleanest way is to remove the message at the beginning of the function :

  CODE --> JavaScript

  function ValidateEmail(em){
    document.getElementById('emTextBox').innerHTML = '';
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(em.value.match(mailformat)){
      return true;
    }
    else{
      document.getElementById('emTextBox').innerHTML = "Enter valid EMail ID";
      return false;
    }
  } 

• The form is never submitted because the formValidation() function always returns false unconditionally. Just return true when all validation passed :

  CODE --> JavaScript

  function formValidation()
  {
    var fn = document.registration.element_12;
    var ln = document.registration.element_13;
    var sx = document.registration.element_11;
    var em = document.registration.element_5;
    if(fname_validation(fn,5)){
      if(lname_validation(ln,5)){
        if(validsex(sx)){
          if(ValidateEmail(em)){
            return true;
          }
        }
      }
    }
    return false;
  } 

Feherke.
http://feherke.github.com/

Quote (vishalonne)

What do you suggest?

Quote (vishalonne)

Can we use any sort of oblur event for clearing the message?

Quote (vishalonne)

And most important... how can validate 11 check box with current code?

Quote (vishalonne)

I am planning to do something like this, is this okay...

Feherke.
http://feherke.github.com/

• The official HTML 5 Reference by W3C.
• The Dive Into HTML5 online book by Mark Pilgrim.
• The The Current State of HTML5 Form overview by Wufoo.

Feherke.
http://feherke.github.com/