title: FORM VALIDATION using javascript by reyanpapa
body: <p>Hi everyone, I encountered an error with regards to my program in html and javascript. When I submit input information in the fields of name, email and age, it prompts an error message, saying that I must choose a gender. However, after prompting the error message, the information in the name, email and age has been deleted. This is my code, I hope someone could help me.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;!-- Creating Page Title --&gt;
      &lt;title&gt;validation&lt;/title&gt;
  
      &lt;!-- For Form validation we have to use JavaScript
      JavaScript needs only a browser to run, there is no need of 
      server to run JavaScript --&gt;
  
      &lt;script language="javascript"&gt;
  
          //Start JavaScript Function
  
          function verify() {
  
              //for field must take some input
  
              if (document.form1.name.value == "") {
                  alert("Please give the name");
                  document.form1.name.forus();
                  return false;
              }
  
              //for field must take some input
  
              if (document.form1.email.value == "") {
                  alert("Please give the email");
                  return false;
              }
  
              // for field must take some input
  
              if (document.form1.age.value == "") {
                  alert("Please give age");
                  document.form1.age.focus();
                  return false;
              }
  
              // alert thrown when age limit is below 18 and above 60
  
              if (document.form1.age.value &lt; 18 || document.form1.age.value &gt; 60) {
                  alert("Please give Age range between 18 and 60");
                  document.form1.age.focus();
                  return false;
              }
  
              // Gender must be selected
  
              if (document.form1.gender[0].checked == false &amp;&amp;
                      document.form1.gender[1].checked == false) {
                  alert("Please select gender");
                  document.form1.gender.focus();
                  return false;
              }
  
              // At least one checkbox must be checked
  
              if (document.form1.language1.checked == false &amp;&amp;
                      document.form1.language2.checked == false &amp;&amp;
                      document.form1.language3.checked == false) {
                  alert("Please Select your choice of language(Atleast One)");
                  return false;
              }
  
              //Country must be chosed
  
              if (document.form1.country.value == "") {
                  alert("Please give country");
                  document.form1.country.focus();
                  return false;
              }
  
              //field must take some input
  
              if (document.form1.myaddress.value == "") {
                  alert("Please give address");
                  document.form1.myaddress.focus();
                  return false;
              }
  
              //field must take some input
  
              if (document.form1.u_name.value == "") {
                  alert("Please give username");
                  document.form1.u_name.focus();
                  return false;
              }
  
              //field must take some input
  
              if (document.form1.pass.value == "") {
                  alert("Please give Password");
                  document.form1.pass.focus();
                  return false;
              }
  
              //password length must be greater than 5 characters
  
              if (document.form1.pass.value.lenght &lt; 6) {
                  alert("Please give a Password more than 5 characters");
                  document.form1.pass.focus();
                  return false;
              }
  
              // for field must take some input
  
              if (document.form1.r_pass.value == "") {
                  alert("Please retype your password");
                  document.form1.r_pass.focus();
                  return false;
              }
  
              //password and confirm password must matched
  
              if ((document.form1.pass.value) != (document.form1.r_pass.value)) {
                  alert("Your password does not match");
                  document.form1.r_pass.value == "";
                  document.form1.r_pass.focus();
                  return false;
              }
              return( true );
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Creating Form --&gt;
  &lt;form method="POST" action="" name="form1"&gt;
  
      &lt;!-- Creating Table, having 11rows and 2 columns. --&gt;
      &lt;table border="2" align="center" cellpadding="7"&gt;
  
          &lt;!-- Start First Row --&gt;
          &lt;tr&gt;
              &lt;!-- Creating First Column --&gt;
              &lt;td&gt;&lt;strong&gt;Name:&lt;/strong&gt;&lt;/td&gt;
  
              &lt;!-- Creating Second Columns --&gt;
              &lt;td&gt;
                  &lt;!-- TextBox --&gt;
                  &lt;input type="text" name="name"/&gt;
              &lt;/td&gt;
              &lt;!-- Close First Row --&gt;
          &lt;/tr&gt;
  
          &lt;!-- Creting First Columns --&gt;
          &lt;td&gt;&lt;strong&gt;Email:&lt;/strong&gt;&lt;/td&gt;
  
          &lt;!-- Creating Second Columns --&gt;
          &lt;td&gt;
              &lt;!-- Textbox --&gt;
              &lt;input type="text" name="email"/&gt;
          &lt;/td&gt;
          &lt;!-- Close Second row --&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Age:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Textbox --&gt;
                  &lt;input type="text" name="age" size="2"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Gender:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Radio Butong --&gt;
                  &lt;input type="radio" name="gender" value="Male"/&gt;Male
                  &lt;input type="radio" name="gender" value="Female"/&gt;Female
  
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Language:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Check box --&gt;
                  &lt;input type="checkbox" name="language1" value="Hindi"/&gt;Hindi
                  &lt;input type="checkbox" name="language2" value="English"/&gt;English
                  &lt;input type="checkbox" name="language3" value="Urdu"/&gt;Urdu
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Country:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Combo Box --&gt;
                  &lt;select name="country"/&gt;
                  &lt;option value="" selected/&gt;
                  --Select--
                  &lt;option value="indi"/&gt;
                  India
                  &lt;option value="pakistan"/&gt;
                  Pakistan
                  &lt;option value="beangladesh"/&gt;
                  Beangladesh
                  &lt;option value="srilanka"/&gt;
                  Srilanka
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Address:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- TextArea --&gt;
                  &lt;textarea rows="5" cols="20" name="myaddress"/&gt;&lt;/textarea&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Username:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
  
                  &lt;!-- Textbox --&gt;
                  &lt;input type="text" name="u_name"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Password:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Password Field --&gt;
                  &lt;input type="password" name="pass"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Retype Password:&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- Password Field --&gt;
                  &lt;input type="password" name="r_pass"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr align="center"&gt;
  
              &lt;td&gt;
                  &lt;!--Submit Button, Function verify need to be called when we process
                  submit button--&gt;
                  &lt;input type="submit" value="Submit" onClick="return (verify());"/&gt;
              &lt;/td&gt;
  
              &lt;td&gt;
                  &lt;!--Reset Button--&gt;
                  &lt;input type="reset"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;!--Table Close--&gt;
      &lt;/table&gt;
  
      &lt;!--Form Close --&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>