当输入字段为空时，使用jQuery来阻止表单提交

[英]Using jQuery to prevent form submission when input fields are empty

本文翻译自 LNA 查看原文 2013/07/25 42162 javascript/ jquery/ forms

The solution should be pretty straightforward. I'm trying to prevent the form from submitting properly when no value is found within the input boxes. Here's my JSFiddle: http://jsfiddle.net/nArYa/7/

解决方案应该非常简单。我想在输入框中找不到任何值时阻止表单正确提交。这是我的JSFiddle:http://jsfiddle.net/nArYa/7/

//Markup

<form action="" method="post" name="form" id="form">
<input type="text" placeholder="Your email*" name="email" id="email">
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name"
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>

//jQuery

if ($.trim($("#email, #user_name").val()) === "") {
    $('#form').submit(function(e) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    })
}

As you can see in the JSFiddle, the problem is that when I type something into both fields, the alert box STILL pops up. I'm having a hard time figuring out why. Is there something wrong within my if($.trim($"#email, #user_name").val()) === "") ?

正如您在JSFiddle中看到的那样,问题是当我在两个字段中输入内容时,会弹出警告框STILL。我很难搞清楚原因。在我的if($ .trim($“#email,#user_name”)。val())===“”)中是否有问题?

5 个解决方案

#1

Two things, #1 the check for empty fields should happen on every attempt of submit, #2 you need to check each field individually

两件事,#1检查空字段应该在每次提交尝试时发生,#2你需要单独检查每个字段

$('#form').submit(function() {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") {
        alert('you did not fill out one of the fields');
        return false;
    }
});

Updated fiddle

#2

Your check occurs on page load. You need to check the field when the form is submitted.

您的检查在页面加载时发生。提交表单时需要检查字段。

$('#form').submit(function(e) {
    if ($.trim($("#email, #user_name").val()) === "") {
        e.preventDefault();
        alert('you did not fill out one of the fields');
    }
});

#3

I guess that this will help:

我想这会有所帮助:

$('#form').submit(function(e) {
    e.preventDefault();
    $("#email, #user_name").each(function(){
        if($.trim(this.value) == ""){
            alert('you did not fill out one of the fields');
        } else {
            // Submit 
        }
    })
})

#4

HTML5: use required in input tag

HTML5:在输入标记中使用必需的

A boolean attribute.
布尔属性。
Input field must be filled out before submitting the form.
在提交表单之前必须填写输入字段。
Works with text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
适用于文本,搜索,网址,电话,电子邮件,密码,日期选择器,号码,复选框,广播和文件。
```
<input required type='text'...>
```

w3schools hint

#5

Put your if statement inside the callback:

将if语句放在回调中:

$('#form').submit(function(e) {
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) {
        e.preventDefault();
        alert('you did not fill out one of the fields');
        //You can return false here as well
    }
});

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2013/07/25/68184db2bfeec5b45cb1b44f105f05a4.html。

猜您在找

如果表单字段为空，则使用ajax阻止表单提交 - Prevent form submit with ajax if form fields are empty 如果选择字段相同，使用Javascript来阻止表单提交？ - Using Javascript to prevent form submission if select fields are the same? 如果字段为空，则使用jquery ujs阻止表单提交 - Preventing a form submission with jquery ujs if the field is empty 使用Angular Formly时，表单中未包含的空字段会提交 - Empty fields not included on form submit when using Angular Formly 当输入验证失败时，Angularjs防止表单提交 - Angularjs prevent form submission when input validation fails

赞助商链接