最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - stop form during submission if it validates incorrectly - Stack Overflow

programmeradmin4浏览0评论

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?

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?

Share Improve this question asked Dec 2, 2012 at 4:55 user115422user115422 4,70010 gold badges27 silver badges38 bronze badges 2
  • 1 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 of x == null – Miltos Kokkonidis Commented Dec 2, 2012 at 5:15
  • On the other hand you probably need to also check that the user has not just pressed space a few times and then submitted. More than that, I think you need to trim the input before sending it. I have updated my solution to cover both the possibility that you only want the check for spaces and that you want to send the trimmed input back to the server. – Miltos Kokkonidis Commented Dec 2, 2012 at 5:34
Add a ment  | 

7 Answers 7

Reset to default 3

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

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 patibility, 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/9LPfb/2/ http://jsfiddle/9LPfb/3/ http://jsfiddle/9LPfb/6/

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.

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;
   }
}

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>

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;
    }

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>
发布评论

评论列表(0)

  1. 暂无评论