CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
callumtaylorr
callumtaylorr

Reputation: 1

HTML and Javascript validation

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>

Upvotes: 0

Views: 236

Answers (3)

Haroon
Haroon

Reputation: 127

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>

Upvotes: 0

Ritesh Chandora
Ritesh Chandora

Reputation: 8640

Simple Html is fine

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

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

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");
}

Upvotes: 1

Related Questions