CODEWITHSUNDEEP
javascripthtml
Tafadzwa Sibanda
Tafadzwa Sibanda

Reputation: 11

my html form wont validate.see html code and java script in the snippets

My html form wont validate but i tried to submit it to the js code using the PatientRegistration value as the name the html form will call from the form action="addpatient.php" method="post" name="PatientRegistration" onsubmit="return(validate());" and script type="text/javascript" src="validate.js" for more details see the code snippets below 

function validate()
{ 
   if( document.PatientRegistration.id.value == "" )
   {
     alert( "Please provide your ID!" );
     document.PatientRegistration.id.focus() ;
     return false;
   }
   if( document.PatientRegistration.name.value == "" )
   {
     alert( "Please provide your  Name!" );
     document.PatientRegistration.name.focus() ;
     return false;
   }
   
   if( document.PatientRegistration.address.value == "" )
   {
     alert( "Please provide your Postal Address!" );
     document.PatientRegistration.address.focus() ;
     return false;
   }
   
   if ( ( PatientRegistration.sex[0].checked == false ) && ( PatientRegistration.sex[1].checked == false ) )
   {
   alert ( "Please choose your Gender: Male or Female" );
   return false;
   }   
   if( document.PatientRegistration.occupation.value == "" )
   {
     alert( "Please provide your  Occupation!" );
     document.PatientRegistration.occupation.focus() ;
     return false;
   }
    
 
 if( document.PatientRegistration.age.value == "" )
   {
     alert( "Please provide your age!" );
     document.PatientRegistration.age.focus() ;
     return false;
   }
 
end of java script
<html>
<head>
	<title>Patient Registration Form</title>
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="addpatient.php" method="post" name="PatientRegistration" onsubmit="return(validate());">

	<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
	cellspacing="2">
	
		<tr>
			<td colspan=2>
			<center><font size=4><b>Patient Registration Form</b></font></center>
			</td>
		</tr>

		<tr>
			<td>ID</td>
			<td><input type="text" name="id" id="id" size="30"></td>
		</tr>

		<tr>
			<td>Name</td>
			<td><input type="text" name="name" id="name"
			size="30"></td>
		</tr>
	
		<tr>
			<td>Postal Address</td>
			<td><input type="text" name="address" id="address" size="30"></td>
		</tr>

		

		<tr>
			<td>Sex</td>
			<td>
				<input type="radio" name="gender" value="male" size="10">Male
				<input type="radio" name="gender" value="Female" size="10">Female
			</td>
		</tr>
<tr>
			<td>Occupation</td>
			<td><input type="text" name="occupation" id="occupation" size="30"></td>
		</tr>

		<tr>
			<td>Age</td>
			<td><input type="text" name="age" id="age" size="30"></td>
		</tr>

		<tr>
			<td>Mobile</td>
			<td><input type="text" name="mobile" id="mobile" size="30"></td>
		</tr>
		<tr>
			<td>
				<input type="reset">
			</td>
			<td colspan="2">
				<input type="submit" value="Register" />
			</td>
		</tr>
		
	</table>
	
</form>
</body>
</html>

Upvotes: 0

Views: 50

Answers (1)

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

please check this bellow code. add your jquery code in header script tag
Demo

<html>
    <head>
        <title>Patient Registration Form</title>
        <script type="text/javascript" src="validate.js"></script>
        <script>
        function validate()
    { 
       if( document.PatientRegistration.id.value == "" )
       {
         alert( "Please provide your ID!" );
         document.PatientRegistration.id.focus() ;
         return false;
       }
       if( document.PatientRegistration.name.value == "" )
       {
         alert( "Please provide your  Name!" );
         document.PatientRegistration.name.focus() ;
         return false;
       }

       if( document.PatientRegistration.address.value == "" )
       {
         alert( "Please provide your Postal Address!" );
         document.PatientRegistration.address.focus() ;
         return false;
       }
       if ( (  document.PatientRegistration.gender[0].checked == false ) && (  document.PatientRegistration.gender[1].checked == false ) )
       {
             alert ( "Please choose your Gender: Male or Female" );
            return false;
       }  

       if( document.PatientRegistration.occupation.value == "" )
       {
         alert( "Please provide your  Occupation!" );
         document.PatientRegistration.occupation.focus() ;
         return false;
       }


     if( document.PatientRegistration.age.value == "" )
       {
         alert( "Please provide your age!" );
         document.PatientRegistration.age.focus() ;
         return false;
       }
    }
        </script>
    </head>
    <body>
    <form action="addpatient.php" method="post" name="PatientRegistration" onsubmit="return(validate());">

        <table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
        cellspacing="2">

            <tr>
                <td colspan=2>
                <center><font size=4><b>Patient Registration Form</b></font></center>
                </td>
            </tr>

            <tr>
                <td>ID</td>
                <td><input type="text" name="id" id="id" size="30"></td>
            </tr>

            <tr>
                <td>Name</td>
                <td><input type="text" name="name" id="name"
                size="30"></td>
            </tr>

            <tr>
                <td>Postal Address</td>
                <td><input type="text" name="address" id="address" size="30"></td>
            </tr>



            <tr>
                <td>Sex</td>
                <td>
                    <input type="radio" name="gender" value="male" size="10">Male
                    <input type="radio" name="gender" value="Female" size="10">Female
                </td>
            </tr>
    <tr>
                <td>Occupation</td>
                <td><input type="text" name="occupation" id="occupation" size="30"></td>
            </tr>

            <tr>
                <td>Age</td>
                <td><input type="text" name="age" id="age" size="30"></td>
            </tr>

            <tr>
                <td>Mobile</td>
                <td><input type="text" name="mobile" id="mobile" size="30"></td>
            </tr>
            <tr>
                <td>
                    <input type="reset">
                </td>
                <td colspan="2">
                    <input type="submit" value="Register" />
                </td>
            </tr>

        </table>

    </form>
    </body>
    </html>

Upvotes: 0

Related Questions