javascript 用户输入后如何清除表单上的验证消息

How to clear validation message on form after user input

提问by JWayne93

I basically have made a sign up form and included validation messages next to each text field if the data entered is correct but I was wondering once the user has input the correct data how can I clear this message, at the moment it stays present on the screen. I am a beginner so I have a feeling that I am doing this an extremely long way, also any suggestions on how I can check if the username exists in database the same way I am checking validation with javascript. The submit button is unavailable until all required fields are valid. Thanks

如果输入的数据正确，我基本上已经制作了一个注册表单并在每个文本字段旁边包含验证消息，但我想知道一旦用户输入了正确的数据，我如何清除此消息，目前它仍然存在于屏幕。我是一个初学者，所以我有一种感觉，我在做这件事的路很长，还有关于如何检查用户名是否存在于数据库中的任何建议，就像我用 JavaScript 检查验证一样。在所有必填字段都有效之前，提交按钮不可用。谢谢

<script type="text/javascript">
        function validate()
        {
            var valid = true;

            if (validateUsername() === true && validatePassword() === true &&
                    validateMobileNumber() === true && validateEmail() === true &&
                    validateCity() === true && validatePostode() === true &&
                    validateDOB() === true && validatePasswordVeri() === true)
            {
                valid = false;
            }

            if (valid)
            {
                document.getElementById('submit').disabled = !valid;
            }


        }

        function validateUsername()
        {
            if (registerform.username.value.length === null || registerform.username.value === "")
            {
                document.getElementById('uname').innerHTML = "Please enter a username";
                return false;
               }
            return true;
        }

        function validatePassword()
        {

            if (registerform.password.value.length >= 6 || registerform.password.value === "")
            {
                document.getElementById('pword').innerHTML = "Please enter a password which is 6 or more characters";
                return false;
            }
               return true;
        }


            function validatePasswordVeri()
            else if (registerform.passwordVeri.value !== registerform.password.value || register.passwordVeri.value === "")
            {
                document.getElementById('pwordv').innerHTML = "Passwords do not match";
                return false;
            }
            return true;
        }

        function validateMobileNumber()
        {
            if (registerform.mobileNumber.value.length !== 11 || registerform.mobileNumber.value === "")
            {
                document.getElementById('mobNum').innerHTML = "Please enter a correct mobile number";
                return false;
            }
            return true;
        }

        function validateEmail()
        {
            return true;
        }

        function validatecity()
        {
            if (registerform.city.value === "")
            {
                document.getElementById('userCity').innerHTML = "Please enter a city";
                return false;
            }
            return true;
        }
        function validatePostcode()
        {
            if (registerform.postCode.value === "")
            {
                document.getElementById('pCode').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }
        function validateDOB()
        {
            if (registerform.dateOfBirth.value === "")
            {
                document.getElementById('dob').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }



    </script>

HTML FORM

HTML 表单

<?php
require_once("config.php");
if (!isset($_POST['submit'])) {
    ?>   <!-- The HTML registration form -->
    <form name="registerform"  method="post">
        Please fill the following form to sign up:<br /><br />

        Username*: <input type="text" name="username" onKeyup="validate()" onBlur="validateUsername();" /><span id="uname"></span><br />
        Password*: <input type="password" name="password" onKeyup="validate()" onBlur="validatePassword();"/><span id="pword"></span><br />
        Password Verify*: <input type="password" name="passwordVeri" onKeyup="validate()" onBlur="validatePassword();"/><span id="pwordv"></span><br />
        First name: <input type="text" name="firstName" /><br />
        Last name: <input type="text" name="lastName" /><br />
        Email*: <input type="email" name="emailAddress" onKeyup="validate()" onBlur="validateEmail();"/><span id="emailAdd"></span><br />
        Relationship Status*: <select name="relationshipStatus" >
            <option value="Single">Single</option>
            <option value="Taken">Taken</option>            
        </select> 
        City*: <input type="text" name="city" onKeyup="validate()" onBlur="validatecity();"/><span id="userCity"></span><br />
        Postcode*: <input type="text" name="postCode" onKeyup="validate()" onBlur="validatePostcode();"/><span id="pCode"></span><br />
        Mobile number*: <input type="tel" name="mobileNumber" onKeyup="validate()" onBlur="validateMobileNumber();"/><span id="mobNum"></span><br />
        Gender*: <select name="gender" >
            <option value="Male">Male</option>
            <option value="Female">Female</option>            
        </select>
        Date of Birth*: <input type="date" name="dateOfBirth" onKeyup="validate()" onBlur="validateDOB();"/><span id="dateOfBirth"></span>(Format: DD-MM-YYYY)<br />

        <input type="submit" id="submit" name="submit" value="Register" disabled="disabled"/>

    </form>
    <?php

采纳答案by Spencer Wieczorek

You can use element.onblur, which means when we lose focus from an element call some function. For example:

您可以使用element.onblur，这意味着当我们从元素中失去焦点时调用某个函数。例如：

someElement.onblur = function(){ 
    // Code that updates the validation message 
};

This can also be done in jQuery. With $( 'someElement' ).blur(function() { ... });

这也可以在 jQuery 中完成。和$( 'someElement' ).blur(function() { ... });

To you question on checking if it's in the database (I'm assuming using PHP/SQL), we can do this:

对于检查它是否在数据库中的问题（我假设使用 PHP/SQL），我们可以这样做：

 $result = mysqli_query("SELECT * FROM $tbl_usernames WHERE username='$username'");

Then we can check if the username was there with: if(mysqli_num_rows($result) == 1)

然后我们可以检查用户名是否存在： if(mysqli_num_rows($result) == 1)

回答by Nathan

Adding an else statement to return the value of your error message span to a non-error state could correct this.

添加 else 语句以将错误消息范围的值返回到非错误状态可以纠正此问题。

if (!validateUsername())
    {
        document.getElementById('uname').innerHTML = "Please enter a username";
    }else {
        document.getElementById('uname').innerHTML = "";
    }

this should display your error msg and return it to blank when a valid input is present.

这应该显示您的错误消息并在存在有效输入时将其返回空白。

I would extend this answer by asking you to consider the cost/gain of validating the entire form on keyup of individual fields along with validating the individual field on blur. if you isolate your validation code into individual functions. then you could validate only the individual field on keyup and the entire form only on submit.

我将通过要求您考虑在单个字段的 keyup 上验证整个表单以及在模糊上验证单个字段的成本/收益来扩展这个答案。如果您将验证代码隔离到单独的函数中。那么您只能在 keyup 上验证单个字段，仅在提交时验证整个表单。