JS Form validation is not working For html form

Question

I have a simple HTML form. The form is as follows-

<table>
  <form method="post" action="insert.php"  name="idea_1" id="idea_1" onsubmit="return idea_1_check();" >    
    <input type="hidden" name="type" value="idea" />    
    <tr><td></td><td><br><h3 style="color:#990066; font-weight:bold;">First Member (Team Leader)</h3><br></td></tr> 
    <tr><td></td><td><input type="text" name="stu_name_1" value="" placeholder="Your Full Name"></td></tr>
    <input type="text" name="school_name_1" value="" placeholder="Your School Name"></td></tr>
    <tr><td></td><td><input type="text" name="stu_id_1" value="" placeholder="Your Student ID/Roll"></td></tr> 
    <tr><td></td><td>
      <select name="class_1" id="class" required >
        <option selected="selected" value="">Please Select Your Class</option>
        <option value="Six">Six</option>
        <option value="Seven">Seven</option>
        <option value="Eight">Eight</option>
        <option value="Nine">Nine</option>
        <option value="Ten">Ten</option>
      </select> 
    </td></tr>
    </td><td>
    <select name="division_1" id="division" required>
      <option selected="selected" value="">Please Select Your Division</option>
      <option value="Dhaka">Dhaka</option>
      <option value="Chittagong">Chittagong</option>
      <option value="Sylhet">Sylhet</option>
    </select> 
    </td></tr>
    <tr><td></td><td><input type="text" name="mobile_1" value="" placeholder="Your Parent's Mobile" required id="phone" ></td></tr>
    <tr><td></td><td><input type="text" name="interest_1" value="" placeholder="Your Interest e.g.: Robotics, Physics, Chemistry, Biology "></td></tr>
    <tr><td></td><td><textarea name="address_1" required id="must"="required id="must"" placeholder="Your Full Residential Address"></textarea></td></tr>                                   
    <tr><td></td><td><input type="text" name="email_1" value="" placeholder="Your Email Address" id="email_1"  ><img id="tick_1" src="tick.png" width="16" height="16"/>
    <img id="cross_1" src="cross.png" width="16" height="16"/></td></tr>
</table>
<br>
<p class="submit"><input type="submit" name="commit" value="Register" ></p><br>
<label>
  <div align="center"><a href="http://ignite-bd.com/submit-concept-paper/" target="_blank"><strong>Upload your Concept Paper within 3 weeks (21 Days) to qualify for the divisional round</strong> </a>
  </div>
</label>
<br><br>            
</form>

And the javascript validation function is as follows:

function idea_1_check()
{
  var stu_name=document.forms["idea_1"]["stu_name_1"].value;
  var school=document.forms["idea_1"]["school_name_1"].value;
  var id=document.forms["idea_1"]["stu_id_1"].value;
  var mob=document.forms["idea_1"]["mobile_1"].value;
  var add=document.forms["idea_1"]["address_1"].value;
  var email=document.forms["idea_1"]["email_1"].value;

  var atpos=email.indexOf("@");
  var dotpos=email.lastIndexOf(".");   

  if (stu_name==null || stu_name=="" || stu_name.length<6)
  {
    alert("Please provide Your full name");
    return false;
  }

  if (school==null || school=="" || school.length<6)
  {
    alert("Please provide Your full School name");
    return false;
  }

  if (id==null || id=="" || id.length<1)
  {
    alert("Please provide Your Roll/ID");
    return false;
  }

  if (add=null || add=="" || add.length<10)
  {
    alert("Please provide Your full Residential Address");
    return false;
  }

  else if (email==null || email=="")
  {
    alert("Email must be filled out.");
    return false;
  }

  else if (atpos <1 || dotpos <atpos+2 || dotpos + 2 >= email.length)
  {
    alert("Not a valid e-mail address");
    return false;
  }
}

Everything looks fine. But The validation is not working. Same code with another similar from is working. Then what is the problem with my code?

Is using <table> <form> </table> </form> even proper coding? — Déjà vu
– Déjà vu, Commented Mar 24, 2014 at 10:05
Clean your HTML first. for example your address textarea is a mess with the attributes — ylerjen
– ylerjen, Commented Mar 24, 2014 at 10:08

Nauphal · Accepted Answer · 2014-03-24 10:02:59Z

3

Just add return true at the end of you validate function, so that the form will submit if there is no validation errors

answered Mar 24, 2014 at 10:02

Nauphal

6,1824 gold badges30 silver badges43 bronze badges

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

Comments

James T · Accepted Answer · 2014-03-24 10:06:56Z

1

Your validation works for me. At first though I had to fill out the drop downs, parents mobile number and the address as the html validation is run first before the javascript validation.

These fields that I had to fill in first (before the enter your full name alert popped up) all had the required attribute.

answered Mar 24, 2014 at 10:06

James T

4992 silver badges5 bronze badges

2 Comments

ylerjen Over a year ago

This is not the script validation but the browser validation according to the html5 validation rules

James T Over a year ago

Yes of course (I know html cannot actually validate inputs) but I was referring loosely to html5 validation rules as to point out they are the reason for invoking this behavior. Maybe I should rewrite my answer a bit?

Dipali Vasani · Accepted Answer · 2014-03-24 10:12:30Z

check the working code as follows:

<table>
    <form method="post" action="insert.php" name="idea_1" id="idea_1"
        onsubmit="return idea_1_check();">

        <input type="hidden" name="type" value="idea" />
        <tr>
            <td></td>
            <td><br>
            <h3 style="color: #990066; font-weight: bold;">First Member
                    (Team Leader)</h3>
                <br></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="stu_name_1" value=""
                placeholder="Your Full Name" required="required"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="school_name_1" value=""
                placeholder="Your School Name" required="required"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="stu_id_1" value=""
                placeholder="Your Student ID/Roll" required="required"></td>
        </tr>
        <tr>
            <td></td>
            <td><select name="class_1" id="class" required="required" >
                    <option selected="selected" value="">Please Select Your
                        Class</option>
                    <option value="Six">Six</option>
                    <option value="Seven">Seven</option>
                    <option value="Eight">Eight</option>
                    <option value="Nine">Nine</option>
                    <option value="Ten">Ten</option>
            </select></td>
        </tr>
        <tr>
            <td></td>
            <td><select name="division_1" id="division" required="required">
                    <option selected="selected" value="">Please Select Your
                        Division</option>
                    <option value="Dhaka">Dhaka</option>

                    <option value="Chittagong">Chittagong</option>

                    <option value="Sylhet">Sylhet</option>

            </select></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="mobile_1" value=""
                placeholder="Your Parent's Mobile" required="required" id="phone"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="interest_1" value=""
                placeholder="Your Interest e.g.: Robotics, Physics, Chemistry, Biology " required="required"></td>
        </tr>
        <tr>
            <td></td>
            <td><textarea name="address_1" id="must" required="required"
                     placeholder="Your Full Residential Address"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="text" name="email_1" value=""
                placeholder="Your Email Address" id="email_1" required="required"><img
                id="tick_1" src="tick.png" width="16" height="16" /> <img
                id="cross_1" src="cross.png" width="16" height="16" /></td>
        </tr>
</table>
<br>
<p class="submit">
    <input type="submit" name="commit" onclick="return idea_1_check();" value="Register">
</p>
<br>
<label>
    <div align="center">
        <a href="http://ignite-bd.com/submit-concept-paper/" target="_blank"><strong>Upload
                your Concept Paper within 3 weeks (21 Days) to qualify for the
                divisional round</strong> </a>
    </div>
</label>
<br>
<br>
</form>
</table>

Here is the link for working copy : http://jsfiddle.net/CU9gP/1/

Collectives™ on Stack Overflow

JS Form validation is not working For html form

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related