I’m making a website with lots of forms. I’m trying to make my codes

Question

0

Asked: May 24, 20262026-05-24T09:50:57+00:00 2026-05-24T09:50:57+00:00

I’m making a website with lots of forms. I’m trying to make my codes

0

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!