JavaScript ValidateForm()函数未验证表格

Question

当我输入无效的详细信息时，网站不会出现任何错误，并且它符合表单

我尝试将onsubmit放在表单标签上，并在按钮标签上onclick，但没有任何可行

当我输入无效的电子邮件或邮政编码或密码不匹配

时，应该提出错误

我也想要它，以便当用户输入名字的数字或姓氏时，它会出现错误

  <form  class="modal-content" action="register.php" method="post"  name="myform">
                            <div class="signup-container">()
                                <h1>Sign Up</h1>
                                <p>Please fill in this form to create an account.</p>
                                <hr>
                                <div class="fbox">
                                    <label for="fn"><b style="font-size:14px;">First Name</b></label>
                                    <input type="text" id= "First_Name" placeholder="Enter First Name" name="fname" required>
                                </div>
                                <div class="sbox">
                                    <label for="ln"><b style="font-size:14px;">Last Name</b></label>
                                    <input type="text" id= "Last_Name" placeholder="Enter Last Name" name="lname" required>
                                </div>
                                <div class="tbox">
                                    <label for="email"><b style="font-size:14px;">Email</b></label>
                                    <input type="text" id="Email" placeholder="Enter Email" name="email" required>
                                </div>
                                <div class="fobox">
                                    <label for="pc"><b style="font-size:14px;">Post Code</b></label>
                                    <input type="text" id="pcode" placeholder="Postcode" name="pcode" required>
                                </div>
                                <div class="fibox">
                                    <label for="psw"><b style="font-size:14px;">Password</b></label>
                                    <input type="password" id="pass" placeholder="Enter Password" name="pass" required>
                                </div>
                                <div class="sixbox">
                                    <label for="psw"><b style="font-size:14px;">Confirm Password</b></label>
                                    <input type="password" id="UserPassword" placeholder="Confirm Password" name="UserPassword" required>
                                </div>
                                <label class="remember">
                                    <input type="checkbox" checked="checked" name="remember"> Remember me
                                </label>
                                <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
                                <div class="clearfix">
                                    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
                                    <button onclick="validateform()"type="submit" name="Submit" class="signupbtn">Sign Up</button>
                                </div>
                            </div>
                        </form>

<script>
  function validateform(){
var Firstname = document.querySelector( "#First_name"); //sets the variable name as the value entered by the user
var Lastname = document.querySelector( "#Last_Name"); //sets the variable name as the value entered by the user
var password = document.querySelector( "#pass");//sets the variable password as the value entered by the user
var confirmpassword = document.querySelector( "#UserPassword");//sets the variable confirmpassword as the value entered by the user
var email = document.querySelector( "#Email");//sets the variable email as the value entered by the user
var atposition = email.indexOf("@");
var dotposition = email.lastIndexOf(".");
var postcode = document.querySelector("pcode");//sets the variable postcode as the value entered by the user
function alertMessage(messageObject) {
    alert(messageObject);
    return true;
}
if (Firstname==null){
  alertMessage("Firstname can't be blank");  //makes sure that the name is not empty
  return false;
}else if (Lastname==null){
  alertMessage("Lastname can't be blank");  //makes sure that the name is not empty
  return false}

else if (atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){
  alertMessage("Please enter a valid e-mail address n atpostion:"+atposition+"n dotposition:"+dotposition);  //makes sure email is in the right format
  return false;
  }
function valid_postcode(postcode){
    postcode = postcode.replace(/s/g, "");
    var regex = /^[A-Z]{1,2} ?[0-9][A-Z]{2}$/i;
    return regex.test(postcode);
}
valid_postcode(postcode)

 if(password.length<8){
  alertMessage("Password must be at least 8 characters long.");  //makes sure password is above 8 characters
  return false;
  }
else if(password!==confirmpassword){
alertMessage("password must be same!");  //makes sure that the passwords match
return false;
}
}

Answer 1

您应该将html类型代码从"提交"更改为"按钮"，因为该页面不自行提交。并以您的形式放置一个ID =" myform"。

<form  class="modal-content" action="register.php" method="post"  name="myform" id="myform">
<button onclick="validateform()" type="button" name="Submit" class="signupbtn">Sign Up</button>

并将此代码放在您的JavaScript上，您可以进行验证以检查一切是否正常，然后调用此功能提交表单。

javacript

    document.getElementById('myForm').submit();