CODEWITHSUNDEEP
javascripthtmlvalidation
user4277248
user4277248

Reputation:

My html form validation is not working

I'm a beginner, and I need some help with my assignment. I can't work out what I've done wrong. The label and submit button appear in html, but when I click on the submit button it doesn't validate the form.

My assignment is to produce a form to enter your name. Onsubmit a function to validate the name is called that will validate that the name cannot be blank and must be more than 6 characters.

<html>
   <head> 
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm()">
         <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
      </form>
      <input type="submit" name="S1" value="Submit response" />
      <script>
         function validateForm(){
         var firstName=document.getElementById("firstName");
                     if (firstName.value.length<6){
                                 alert("Please enter your first name (6 characters or more)");
                                 firstName.focus();
                                 return false;
         }
                     alert("Thank you for your submission");
                     return true;
         }
      </script>
   </body>
   </head>
</html>

Upvotes: 0

Views: 626

Answers (4)

CerebralFart
CerebralFart

Reputation: 3490

The problem with your code is that you try to return a result to an event. Events do not accept any response. So try this;

<html>
  <body>
    <form name="myForm" autocomplete="on" onsubmit="validateForm()">
      <p>
        <label>First name &#40;required&#41;</label>
        <input type="text" id="firstName" autofocus="autofocus" />
      </p>
      <input type="submit" name="S1" value="Submit response" />
    </form>
    <script>
      function validateForm(){
        var firstName=document.getElementById("firstName");
        if (firstName.value.length<6){
          alert("Please enter your first name (6 characters or more)");
          firstName.focus();
          return false;
        }
        alert("Thank you for your submission");
        document.getElementsByTagName("form")[0].submit()
      }
    </script>
  </body>
</html>

Besides that, you put your body in your head, this can cause trouble with some browsers.

Upvotes: 1

Altmish-E-Azam
Altmish-E-Azam

Reputation: 1583

Problem was in your code. Remember you have to put submit button under <form></form> tag. And always put JS code in <head></head> section.

Find below code and try hope this will work for you. 

<html>
   <head>
      <script>
        function validateForm() {
          var firstName = document.getElementById("firstName");
          if (firstName.value.length < 6) {
             alert("Please enter your first name (6 characters or more)");
             firstName.focus();
             return false;
         }
         alert("Thank you for your submission");
         return true;
      }
      </script>
   </head>
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm();">
         <p><label>First name &#40;required&#41; <input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
         <input type="submit" name="S1" value="Submit response" />
      </form>
   </body>
</html>

Upvotes: 0

Pankaj
Pankaj

Reputation: 581

Your submit button is outside of form tag, that's why the onsubmit method is not gettting called.

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Place submit button inside of form tag

function validateForm() {
    var firstName = document.getElementById("firstName");
    if (firstName.value.length < 6) {
        alert("Please enter your first name (6 characters or more)");
        firstName.focus();
        return false;
    }
    alert("Thank you for your submission");
    return true;
}
<html>
   <head> 
   <body>
      <form name="myForm" autocomplete="on" onsubmit="return validateForm()">
         <p><label>First name &#40;required&#41;<input type="text" id="firstName" 
            autofocus="autofocus" /> </label></p>
         <input type="submit" name="S1" value="Submit response" />
      </form>
   </body>
   </head>
</html>

Upvotes: 1

Related Questions