Question

我尝试了以下代码来实现表单的javaScript验证。当有人在没有任何输入的情况下点击Sign Up按钮时，div标签会在浏览器中显示Enter Your First Name。这正是我应该做的。但是，如果有人在没有输入的情况下两次点击Sign Up，则不会调用该函数，而是发送给服务器。

我想知道在下面的代码中要做出哪些更改，以确保在将用户发送到服务器之前强制输入内容。任何帮助将不胜感激。提前谢谢。

 <script language="javascript">
            var flag=0;
            function firstname()
            {
                firstname=join.firstname.value;
                if(firstname=="")
                {
                    document.getElementById("errorFname").innerHTML="Enter Your First Name";
                    flag=1;

                }   
              }
      function check(form)
            {
                flag=0;
                firstname();

                if(flag==1)
                    return false;
                else
                    return true;
            }
    </script>

       <form id= "join"  class="form-signUp" name="join" action="http://cs-sun2000.uscupstate.edu/~student1/cgi-bin/echo.cgi" method= "post" onSubmit="return check(this)">

        <div id="errorFname"></div><br><input name="firstname" type="text" placeholder="First Name" onBlur="firstname()" >
<button  name="submit" type="submit" >Sign Up</button>
        </form>

this is what I see on browser

Answer 1

这是因为firstname变量首先与函数对齐，然后重用以接收输入值。

当input为null时，firstname变量设置为null，并且控制台显示错误。您只需要更改函数名称或字符串变量名称。

---编辑 -

这是working fiddle

var valid;
function checkFirstname() {
  var firstname =join.firstname.value;
  if(!firstname || firstname.trim().length === 0) {
     document.getElementById("errorFname").innerHTML="Enter Your First Name";
     valid=false;
  } else {
      document.getElementById("errorFname").innerHTML="";
  }
}

function check(form) {
  valid=true;
  checkFirstname();
  return valid;
}

我更喜欢检查firstname是否存在：如果firstname为null，它将失败。然后我在修剪后检查长度：如果用户只是放置空格，它将失败。

Answer 2

您可以使用ondblclick事件，例如按钮标记的ondblclick="myFunction()"。

Answer 3

如果您想使用jQuery，这是一个不错的选择，jQueryValidation：

<form id="commentForm" method="post" action="http://cs-sun2000.uscupstate.edu/~student1/cgi-bin/echo.cgi">
    <label for="cfirstname">Enter your first name:</label>
    <em>*</em><input id="cfirstname" name="firstname" size="25" />
</form>

<script src="/jquery/jquery.js"></script>
<script src="/jquery/jquery.validate.js"></script>
<script>
  $(document).ready(function(){
    $("#commentForm").validate({
      rules: {
       firstname: "required"
      }
    });
   });
 </script>

如何在向服务器发出请求之前强制执行JavaScript表单验证？

3 个答案: