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

我有两个输入字段，用户名和密码。我对每个都执行一个基本的空值检查，如果其中一个为空，则返回值为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.');

            }
        }
    });

}

函数ShoppingCartLogin（）{
var userid=$（“.yourder_MainLoginEmail”）.val（）；
var password=$（“.YourOrder\u MainLoginPassword”）.val（）；
var url=“/ShoppingCart/ShoppingCartLogin”；
如果（userid==“”）{
$（'.YourOrder_loginError'）.css（'可见性'，'可见'）；
$（'.YourOrder_loginError'）.text（'输入您的电子邮件地址'）；
返回错误
} 
如果（密码==“”）{
$（'.yourder\u login\u password'）.css（'visibility'，'visible'）；
$（'.YourOrder\u Login\u password'）。文本（'输入密码'）；
返回错误
} 
$.ajax({
url:url，
类型：“POST”，
数据类型：“json”，
数据：{userId:userId，pass:password}，/{userId:userId，pass:password}，
cache:false，
成功：功能（结果）{
如果（result.success==“有效”）{
//隐藏登录表单，清除并隐藏错误
$（'.YourOrder_loginError'）。文本（''；
$（'.YourOrder_loginError'）.css（'可见性'，'隐藏'）；
$（'.yourder_loginForm'）.css（'visibility'，'hidden'）；
//显示发货地址部分
$（'.yourder_ShipAddress'）.css（'visibility'，'visible'）；
location.reload（）；
}
如果（result.error==“无效”）{
//隐藏送货地址部分
$（'.yourder_ShipAddress'）.css（'visibility'，'hidden'）；
$（'.YourOrder_loginError'）.css（'可见性'，'可见'）；
$（'.YourOrder_loginError'）.text（'提供的用户名或密码不正确'）；
}
}
});
}

---

我将简化脚本并在验证之前隐藏所有消息。对于以下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>

使用以下脚本：

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);

---

.

正确的方法是

。这使浏览器能够以本机方式处理它，这总是很好的。您可以使用

title=“…”

在隐藏错误消息的

if

语句中添加

else

子句来自定义错误文本。@Bramar，非常感谢@Niet the Dark Absol，谢谢你的推荐。我将阅读并尝试使用它。

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);