为什么验证在 JavaScript 中不能正常工作？

Question

我有一个输入字段和一个提交按钮：

        <form action="" method="post">
           <input type="text" name="sponsar_name" id="sponsar_name" />
          <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="validate()" >
    </form>

      function validate()
    {
        var flag = 0;
    if(document.getElementById("sponsar_name").value == null || document.getElementById("sponsar_name").value == "")
        {
            document.getElementById("sponsar_name").style.borderColor = 'red';
            flag = 1;
            }
            else
            {
                        document.getElementById("sponsar_name").style.borderColor = '';
                }

                if(flag==1)
                {
                    return false;
                }
                else
                {
                    return true;
                }

    }
                     </script>

我在提交按钮上应用了一个onClick函数。我已经申请了验证。

当我单击提交按钮时，它会显示文本框的红色背景，但会立即刷新页面。

如果文本框为空白，则不应刷新页面，但在我的代码中它正在这样做。

谁能帮我？

Answer 1

试试

<form action="" method="post">
   <input type="text" name="sponsar_name" id="sponsar_name" />
   <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="return validate()" >
</form>

Answer 2

您需要使用onClick="return validate()"或onSubmit="return validate()" 。 它将解决问题。

使用onClick="return validate()"

<form action="" method="post">
    <input type="text" name="sponsar_name" id="sponsar_name" />
    <input type="submit" value="Submit"  class="btn-submit" name="submit" onClick="return validate()" >
</form>

使用onSubmit="return validate()"

<form action="" method="post" onSubmit="return validate()">
    <input type="text" name="sponsar_name" id="sponsar_name" />
    <input type="submit" value="Submit"  class="btn-submit" name="submit">
</form>

Answer 3

你需要这样做，

<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >

当您在方法中返回 false 时，您的表单将不会被提交。

Answer 4

像这样更改表单：删除onClik函数并在表单标题上添加onSubmit

<form action="" method="post" onsubmit="return validate()">
           <input type="text" name="sponsar_name" id="sponsar_name" />
          <input type="submit" value="Submit"  class="btn-submit" name="submit"/> 
    </form>