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

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>

Answer 1

这是因为首先指定给函数的firstname变量然后被重用以接收输入值.

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

---编辑 -

这是一个工作小提琴

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,它将失败.然后我检查修剪后的长度:如果用户只是放置空格,它将失败.