JavaScript validation for examination number of a form

StackOverflow https://stackoverflow.com/questions/23687166

Question

I am currently using html to code a 'form entry'. I am also using a JavaScript validation, to validate the input in of the form. So far, i have the 'name', 'subject' and 'Examination number'. However my validation does not work for my Examination number. It is almost complete, however when i tested my examination number validation, i encountered an error. when testing, i inputted 'abcd' into examination number, this was supposed to inform that the examination number is only supposed to be digits. an error message did display (which is correct), but after clicking okay to try another input, the form seemed to have submitted. it would be great if someone could help me with the validation of examination number, so that the input can only be four digits, and after an error message, wont submit the form and allow the user to re-enter their examination number.

here is my code:

<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">

function validateForm(e) {

    var result = true;
    var msg="";

    if (document.ExamEntry.name.value=="") {
        msg+="You must enter your name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color="red";
        result = false;
    }

    if (document.ExamEntry.subject.value=="") {
        msg+="You must enter the subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color="red";
        result = false;
    }

    var regex = /^\d{4}$/;
    if (document.ExamEntry.Examination_number.value == "") {
        msg+="You must enter your examination number";
    } else if (isNaN(document.ExamEntry.Examination_number.value)) {
        msg+="Examination number should only contain digits";
    } else if (!regex.test(document.ExamEntry.Examination_number.value)) {
        msg+="Examination number should contain exactly 4 digits";
    }

    if (msg != "") {
        alert(msg);
    }

    return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
    <table width="60%" border="0">
        <tr>
            <td id="name">Name</td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td id="subject">Subject</td>
            <td><input type="text" name="subject" /></td>
        </tr>
            <td id="Examination_number">Examination number</td>
            <td><input type="text" maxlength="4" name="Examination_number" /></td>
        </tr>
        <tr>
            <td><input type="submit" name="Submit" value="Submit" /></td>
            <td><input type="reset" name="Reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>

</html>
Était-ce utile?

La solution

Once your validation get done you have to return false if its wrong,

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
    msg+="You must enter your examination number";
    result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
    msg+="Examination number should only contain digits";
    result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
    msg+="Examination number should contain exactly 4 digits";
    result = false;
}

Autres conseils

You need result=false when showing message. Do this:

if (msg != "") {
     result = false;
     alert(msg);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top