Question

我有一个包括验证的联系表格。 HTML表单在输入错误的值时显示错误，但在更正值并输入适当的数据后，它继续显示相同的错误。我正在使用表单中的pattern属性来验证表单。

下面的代码包括表单和用于验证的脚本。这是文档的一部分：

<div id="register" class="animate form registration_form">
      <section class="login_content">
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
          <h1>Create Account</h1>
          <div>
            <input type="text" name="name" id="name" class="form-control" placeholder="Name" pattern='^[a-zA-Z ]*$' autofocus required/>
          </div>
            <!--<?php if(isset($msg_name)) echo "<script>alert('$msg_name')</script>";?>-->
          <div>
            <input type="text" name="username" id="username" class="form-control" placeholder="Username"  autofocus required />
          </div>
            <!--<?php if(isset($msg_username)) echo "<script>alert('$msg_username')</script>";?>-->
          <div>
            <input type="email" name="email"  id="email" class="form-control" placeholder="Email" pattern='^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$' autofocus required/>
          </div>
            <!--<?php if(isset($msg_email)) echo "<script>alert('$msg_email')</script>";?>-->
          <div>
            <input type="text" name="phone" id="phone" class="form-control" placeholder="PhoneNumber"  autofocus required />
          </div>

          <div>
            <input type="password" name="password"  id="password1" class="form-control" placeholder="Password" autofocus required />
            <input type="checkbox" onclick="signup_pass()">Show Password 
          </div><br>    
            <!--<?php if(isset($msg_password)) echo "<script>alert('$msg_password')</script>";?>-->
          <div>
            <input class="btn btn-default submit" type="submit" name="submit" value="SIGNUP"  >

                <?php if(isset($error)) echo "<script>alert('$error')</script>";?>
                <?php if(isset($message)) echo "<script>alert('$message')</script>";?>

          </div>

          <div class="clearfix"></div>

          <div class="separator">
            <p class="change_link">Already a member ?
              <a href="#signin" class="to_register"> Log in </a>
            </p>

            <div class="clearfix"></div>
            <br />

            <div>
              <h1> Elegocart!</h1>
              <p>©2018 All Rights Reserved.Privacy and Terms</p>
            </div>
          </div>
        </form>
      </section>
    </div>




  </div>
</div>
<script>

            function login_pass() {
            var x = document.getElementById("password");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }

        function signup_pass() {
            var x = document.getElementById("password1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }       

        var name = document.getElementById('name');
        var username = document.getElementById('username');
        var email = document.getElementById('email');
        var phone = document.getElementById('phone');
        var password = document.getElementById('password1');
        name.oninvalid = function(event) 
        {
        event.target.setCustomValidity("Name should include only alphabets and white space");
        }
        username.oninvalid = function(event) 
        {
        event.target.setCustomValidity("a-z, 0-9, underscore, hyphen");
        }
        email.oninvalid = function(event) 
        {
        event.target.setCustomValidity("Must be of valid email format");
        }
        phone.oninvalid = function(event) 
        {
        event.target.setCustomValidity("Enter aaa valid phone number");
        }
        password.oninvalid = function(event) 
        {
        event.target.setCustomValidity("Password : must contain uppercase,lowercase,numbers and special characters , and shouldbe minimum of 8 characters long");
        }
</script>

Answer 1

您的功能可能不正确，请尝试如下操作：

 function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
} 

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

HTML表单即使输入正确的值也显示错误

1 个答案: