HTML and Javascript validation

Question

I am trying to add a function, or additional JavaScript to the existing function for a confirmation, I need to insert an additional number field to the form to take the users examination number, the examination number is 4 digits and the JavaScript form will need to validate that it is 4 digits I am new to this and any help is much appreciated.

here is my code so far

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Exam Entry</title>

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

function validateForm() {
            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;
}


if(msg==" "){
return result;
}
{
alert(msg)
return result;
            }


}
</script>
}
</style>
</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry " method="post " action="success.html ">
<table width="50% " 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>

            <tr>
                            <td><input type="submit " name="Submit " value="Submit "        
onclick="return validateForm(); " /></td>
                            <td><input type="reset " name="Reset " value="Reset " /></td>
            </tr>
</table>
</form>
</body>

the JavaScript code also has to validate that the form is not left blank as it does in the previous fields. — callumtaylorr
– callumtaylorr, Commented Mar 7, 2014 at 10:37

Murali Murugesan · Accepted Answer · 2014-03-07 10:28:30Z

1

You can use RegExp ^[0-9]{1,4}$ to test the value that matches 4 digits and can type only numbers 0-9

Include this in your javascript function

var inputVal=document.ExamEntry.name.value;

var patt = new RegExp("^[0-9]{1,4}$");
var res = patt.test(inputVal);
if(!res)
{
  alert("Please enter a valid 4 digit number");
}

answered Mar 7, 2014 at 10:28

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haroon · Accepted Answer · 2014-03-07 10:43:49Z

Code will be look like



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript"" type="text/javascript">

function validateForm() {
            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 patt = new RegExp("^[0-9]{1,4}$");

if (!patt.test(document.ExamEntry.examNumber.value)) {
            msg+="You must enter 4 digit examination number \n";
            document.ExamEntry.subject.focus();
            document.getElementById('examNumber').style.color="red";
            result = false;
}

return result;
            }

function onSubmit(){
  if(confirm('Are you sure to submit')){
  return validateForm();
  }
return false;
}

</script>
</style>
</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" 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>

            <tr>
                            <td><input type="submit" name="Submit" value="Submit"        
onclick="return onSubmit();" /></td>
                            <td><input type="reset" name="Reset" value="Reset" /></td>
            </tr>
</table>
</form>
</body>

Ritesh Chandora · Accepted Answer · 2014-03-07 10:28:56Z

0

Simple Html is fine

<input type="text" name="pin" maxlength="4" size="4">

answered Mar 7, 2014 at 10:28

Ritesh Chandora

8,7005 gold badges24 silver badges39 bronze badges

1 Comment

callumtaylorr Over a year ago

so where would I put this code and is it validated so if nothing is entered in the box the error message will appear as it did in the previous fields.

Collectives™ on Stack Overflow

HTML and Javascript validation

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related