使用 jQuery 验证输入字段时显示相关消息

show pertinent messages when validating input fields using jquery

本文关键字：显示 消息 字段 jQuery 验证 输入 使用      更新时间：2023-09-26

>我有两个输入字段，用户名和密码。我对每个空值执行基本检查，如果任何一个为空，则返回为 false，因此不会执行 .$ajax 请求。这行得通。

我想寻求帮助以增强对空值的检查，并返回 false。

如果输入了电子邮件，

但没有密码，则我收到密码消息错误，并返回false，但是如果随后我输入密码，没有电子邮件，则会收到输入电子邮件错误，但即使之前输入的值未删除，密码错误仍保留在页面上。 这最终导致两条消息都出现在页面上， 这是误导。

密码也会发生同样的情况，步骤相同。

对于我的任务来说，在执行 .$ajax 请求之前，确保输入值并正确显示相关消息非常重要。

下面是我的脚本副本。

我希望有人有时间给我一些帮助。

谢谢。

<script type="text/javascript">
function ShoppingCartLogin() {
    var userid = $(".YourOrder_MainLoginEmail").val();
    var password = $(".YourOrder_MainLoginPassword").val();
    var url = "/ShoppingCart/ShoppingCartLogin";
    if (userid == "") {
        $('.YourOrder_loginError').css('visibility', 'visible');
        $('.YourOrder_loginError').text('Enter your e-mail address.');
        return false
    } 
    if (password == "") {
        $('.YourOrder_loginError_password').css('visibility', 'visible');
        $('.YourOrder_loginError_password').text('Enter your password.');
        return false
    } 
    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: { userId: userid, pass: password },//{ userId: userid, pass: password },
        cache: false,
        success: function (result) {
            if (result.success == "Valid") {
                // hide the login form and clear and hide error
                $('.YourOrder_loginError').text('');
                $('.YourOrder_loginError').css('visibility', 'hidden');
                $('.YourOrder_loginForm').css('visibility', 'hidden');
                // show the shipping address section
                $('.YourOrder_ShipAddress').css('visibility', 'visible');
                location.reload();
            }
            if (result.error == "Invalid") {
                // hide shipping address section
                $('.YourOrder_ShipAddress').css('visibility', 'hidden');
                $('.YourOrder_loginError').css('visibility', 'visible');
                $('.YourOrder_loginError').text('The user name or password provided is incorrect.');
            }
        }
    });
}

我会简化脚本并在验证之前隐藏所有消息。对于以下 HTML：

<form class="YourOrder_loginForm" method="post" action="https://">
    <p>
        <input class="YourOrder_MainLoginEmail" type="email" placeholder="email" />
        <span class="msg_error YourOrder_loginError">Please enter your email.</span>
    </p>
    <p>
        <input class="YourOrder_MainLoginPassword" type="password" placeholder="password" />
        <span class="msg_error YourOrder_loginError_password">Please enter your password.</span>
    </p>
    <p>
        <input class="YourOrder_MainLoginEmail" type="submit" value="Login" />
        <span class="msg_error YourOrder_loginError_general">The user name or password provided is incorrect.</span>
    </p>
</form>

和这个 CSS：

.YourOrder_loginForm {
    position: relative;
}
.loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, .5);
    display: none;
}
.msg_error {
    color: red;
    display: none;
}

使用此脚本：

function ShoppingCartLogin(e) {
    var userid = $(".YourOrder_MainLoginEmail").val();
    var password = $(".YourOrder_MainLoginPassword").val();
    /* Hide all errors */
    $('.msg_error').hide();
    if (!userid) $('.YourOrder_loginError').show();
    if (!password) $('.YourOrder_loginError_password').show();
    if (!userid || !password) return false;
    /* No errors, proceed */
    $('.loading').show();
    var url = "http://jsonplaceholder.typicode.com/users/1"; /* Use your url here */
    $.ajax({
        url: url,
        type: "get",
        /* You should use POST here */
        dataType: "json",
        data: {
            email: userid,
            website: password
        },
        cache: false,
        success: function (result) {
            if (result.success == "Valid")
            /* No need to hide anything, you reload the page */
            location.reload();
            if (result.error == "Invalid") $('.YourOrder_loginError_general').show();
            $('.loading').hide();
        },
        error: function () {
            $('.loading').hide();
        }
    });
    /* Prevent form submition */
    return false;
}
$('.YourOrder_loginForm').on('submit', ShoppingCartLogin);

工作示例。

相关文章：