Question

我尝试在使用jQuery提交之前检查一个或两个字段是否为空。如果任何输入为空，则应该提醒用户，否则转到ajax函数。如果我填写用户名字段，则不会查看密码字段。但是，如果我将用户名字段留空，则会显示正确的对话框，并且它不会执行ajax脚本。我使用.each（）函数错了吗？

html：

    <div id="dialog_success" title="Success">
    <p></p>
</div>
<div id="dialog_error" title="Error">
    <p>If you see this text, check your jQuery.</p>
</div>
<div class="container">
    <h2 class="form-heading">Create New User</h2>
    <form id="insert_user_form" method="post" action="create_user.php" autocomplete="off">
        <div class="container">
            <label for="username">Username</label>
            <input id="username_input" type="text" placeholder="Enter Username" name="username" autofocus>
            <label for="password">Password</label>
            <input type="password" placeholder="Enter Password" name="password">
            <button id="create_user_btn" type="submit">Submit</button>
        </div>
    </form>
</div>

jQuery和ajax的一部分：

$('#insert_user_form').submit(function (e) {
    e.preventDefault();
    $(':input').each(function () {

        if ($(this).val() === "") {
            $('#dialog_error').dialog("open");
            $('.ui-widget-overlay').css({'background': 'red', 'opacity': '0.7'});
            $('#dialog_error p').text("Please fill out all fields.");
            return false;
        }
        else {

            $.ajax({
                type: 'POST',
                //Begin the ajax

我也尝试过：

if($(this).length === 0)

但仍然没有用。

Answer 1

如上所述，您应在检查所有输入后进行AJAX调用。一种简单的方法是使用变量作为标志。

$('#insert_user_form').submit(function (e) {
    e.preventDefault();
    var isempty = false;
    $(':input:not(button)').each(function () {

        if ($(this).val() === "") {
            $('#dialog_error').dialog("open");
            $('.ui-widget-overlay').css({'background': 'red', 'opacity': '0.7'});
            $('#dialog_error p').text("Please fill out all fields.");

            isempty = true;
        }
    });
    if(!isempty){
        //Do your ajax
        // ...

这样，如果填写了所有输入，变量isempty将为false，如果至少有一个输入，则变为true。

此外，$(':input')还会捕获您拥有的button，因此您可以使用:not选择器将其排除。

在空输入上返回false仅适用于一个输入，而不是

1 个答案: