Javascript validate on form Submit

Question

Hi I want to validate the field values before submit the form here is my code

<table width="600" border="0" align="left">
<tr>
<script type="text/javascript">
function previewPrint()
{

var RegNumber = document.getElementById('PP_RegNoTextBox').value;
var PassportNo = document.getElementById('PP_PassportNoTextBox').value;
if (RegNumber=="")
{
    alert("Please enter your Reg No.!");
    document.getElementById('RegNoTextBox').focus();
    return false;
}
if (PassportNo=="")
{
    alert("Please enter your Passport No.!");
    document.getElementById('PassportNoTextBox').focus();
    return false;
}
    //window.open('regformview.php?RegNumber=RegNumber');
    }
    </script>
<form name="ppform" onSubmit="return previewPrint();" method="post" action="regformview.php">   
<td width="100" align="LEFT" class="font8">&nbsp; </td>
<td width="337" align="LEFT" class="font8"><u>Preview your Application:</u> Please provide requested details.<br>
  Reg No.: <input type="text" name="printregno" id="PP_RegNoTextBox" class="input2"> Passport No.:  <input type="text" name="printemail" class="input2"><input type="hidden" name="flagging" id="PP_PassportNoTextBox" value="1" class="input2">&nbsp;</td>
<td width="50" align="LEFT" class="font8"><div style="float:left; background-image:url(images/printPreview1.jpg); background-repeat:no-repeat;">   
  <input type="image" src="images/printPreview1.jpg" name="ppbutton" value="" onMouseOver="this.src='images/printPreview2.jpg'" onMouseOut="this.src='images/printPreview1.jpg'"></div></td>

</form>
   </tr>
</table>

Problem is its showing the alert box correctly if it blank but the page is navigating to regformview.php after submitting. How to navigate to regformview.php only after validation.?

Mihai Iorga · Accepted Answer · 2012-09-27 06:54:41Z

4

These are undefined:

document.getElementById('RegNoTextBox').focus();
document.getElementById('PassportNoTextBox').focus();

it should be:

document.getElementById('PP_RegNoTextBox').focus();
document.getElementById('PP_PassportNoTextBox').focus();

answered Sep 27, 2012 at 6:54

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

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

Comments

Rab Khan · Accepted Answer · 2012-09-27 06:57:35Z

2

Everything is fine, except you have error in your script with let you submit even if validation fails.

change the following lines

 document.getElementById('PassportNoTextBox').focus();

and

document.getElementById('RegNoTextBox').focus();

as

 document.getElementById('PP_PassportNoTextBox').focus();

and

 document.getElementById('PP_RegNoTextBox').focus();

answered Sep 27, 2012 at 6:57

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

Comments

Chandra Sekhar Walajapet · Accepted Answer · 2012-09-27 07:51:26Z

0

Try this it should work.

onSubmit="previewPrint();return false;"

edited Sep 27, 2012 at 7:51

Chandra Sekhar Walajapet

2,55418 silver badges24 bronze badges

answered Sep 27, 2012 at 7:00

Northlondoner

1

1 Comment

MrCode Over a year ago

Using that, the form will never submit. Unless you want some very frustrated users (and no form submissions), I wouldn't recommend that.

Collectives™ on Stack Overflow

Javascript validate on form Submit

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