CODEWITHSUNDEEP
javascripthtmlforms
user115422
user115422

Reputation: 4710

stop form during submission if it validates incorrectly

I am trying to use JavaScript to validate forms but if the form doesn't validate, I don't want the form to be sent to the "action" page.

The validator:

<script>
    function formSubmit()
    {
    document.getElementById("signup_form").submit();
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    }
</script>

The form itself:

<form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">

But all this does is if the tname field empty, it will return an alert but as soon as the user hits ok, the form then redirects to some_file.php. What have I missed here?

The submit button:

<a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>

So what have I missed? How do I avoid this in the future?

Upvotes: 0

Views: 7921

Answers (7)

Jayant Chauhan
Jayant Chauhan

Reputation: 1

Contact Form

  function empty()  {   
     var x,y;

         x = document.forms["ff"]"name"].value; 
         y = document.forms["ff"]["surname"].value;

      if(x=="" ||x==null){
        alert("Enter your name");
        return false;
      }else if(y==""){
        alert("Enter your surname");
        return false;
      }else{
       alert('Data is sending');
       return true;
      } 
   };

In the html:

  <form method="POST" action="formdata.php" name="ff"onsubmit="return empty()">
    <table>
       <tr>
          <td>Enter Your Name : <input type="text" name="name" maxlength="30" size="40" id="na" ></td>
       </tr>
       <tr>
         <td>Enter Your Surname : <input type="text" name="surname" maxlength="30" size="40" id="sna"></td>
     </tr>
     <tr>
       <td>
         <input type="submit" name="formsubmit" value="submit" >
       </td>
    </tr>
  </table>
</form>

Upvotes: -1

Miltos Kokkonidis
Miltos Kokkonidis

Reputation: 3996

Try this:

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value;
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

*Changes made to your code: * - There is no need for formSubmit to try to submit the form! Just perform the validation checks and return true if you want the submission to proceed or false otherwise.

  • Also you do not need to check for the x == null case. If the textbox is empty, its value will be "".

  • What might be needed though is a check that x does not just contain spaces. If you do not care about supporting older browsers you can use the new Javascript trim function. If you care about backwards compatibility, either try one of the many javascript libraries that offer trim or the following:

function formSubmit()
{
    var x=document.forms["signup_form"]["tname"].value.replace(/^\s+|\s+$/g, '');
    if (x=="")
    {
         alert("First name must be filled out");
         return false;
    }
    return true;
}

If I just wanted to avoid submitting spaces I would have left the var x= bit as it was and added the replace in the check making it if(x.replace(/\s/g, '') == ""). However, I also want to trim the input so that if the user enters " user1" or "user1 " the form will send "user1".

You can see the three different versions versions working here: http://jsfiddle.net/9LPfb/2/ http://jsfiddle.net/9LPfb/3/ http://jsfiddle.net/9LPfb/6/

Upvotes: 1

Murali N
Murali N

Reputation: 3508

in your function just remove this line

 document.getElementById("signup_form").submit();

and add it after the if condition

or rewrite the function like the one below

function formSubmit()
    {
    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }else
         return true;
    }

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12693

You already had all the code. It was becos of wrong execution.

<script>
    function formSubmit()
    {
        var x=document.forms["signup_form"]["tname"].value;
        if (!x){
              alert("First name must be filled out");
              return false;
        }
        return true;
    }
</script>


<form action="some_file.php" method="post" id="signup_form" name="signup_form">
<a href="" onclick="return formSubmit();" class="purplebutton">Signup</a>

Upvotes: 1

defau1t
defau1t

Reputation: 10619

You have the wrong execution of statememts. You are submitting the form before validating. Move this statement below the if statement

document.getElementById("signup_form").submit();

further to this. you are calling formSubmit() at two places, form tag and a tag doing it once is fine.

UPDATED CODE:

<html>
<head>
    <title></title>
    <script>
    function formSubmit()
    {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
      document.getElementById("signup_form").submit();
    }
</script>
</head>
<body>
    <form action="some_file.php" method="post" id="signup_form" name="signup_form" onsubmit="return formSubmit()">
        <input type="text" name="tname" />
        <a href="" onclick="return formSubmit(); return false" class="purplebutton">Signup</a>
</body>
</html>

DEMO

Upvotes: 3

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

try:

function formSubmit() {

    var x=document.forms["signup_form"]["tname"].value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
    }
   else {
      return true;
   }
}

Upvotes: 1

Ravindra Bagale
Ravindra Bagale

Reputation: 17675

you have problem with your program flow .
do validation before the submitting form.
there is no use of validating after submitting, i think you have mistakenly made it. just submit after validation.

Upvotes: 1

Related Questions