如果复选框未被选中，则防止表单提交。

Question

如果输入字段为空，我使用一些Ajax / Javascript来防止表单提交。

$(function() {

    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        e.preventDefault();


        var formData = $(form).serialize();

  if (document.getElementById("nachricht-field").value.length < 10) {
    document.getElementById('error-nachricht').style.display = "";
  } else {

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        .done(function(response) {
         document.getElementById('success').style.display = "";
          document.getElementById('error').style.display = "none";
      document.getElementById('error-nachricht').style.display = "none";

            $('input').val('');
   $('textarea').val('');
   $('.button').val('Abschicken');
   $('input[name=datenschutz]').attr('checked', false);
        })
        .fail(function(data) {
           document.getElementById('error').style.display = "";
            document.getElementById('success').style.display ="none";
        });

  }

    });

});

该脚本可以正常运行，但是没有注意到表单中的复选框。复选框。

<input type="checkbox" name="datenschutz" value="Datenschutz" required="required" >

还需要该复选框的选择，但是用户可以在不选中该复选框的情况下提交表单。是否有一个小脚本可以在当前Ajax-脚本中实现？

- susanloek

---

var Checked = $('input[name="datenschutz"]:checked').length; if(Checked > 0){ // 这里做些事情}else{ // 这里做些事情 } - Rahul Saxena

Answer 1

使用以下方式：

$(form).submit(function(e) {
    e.preventDefault();
    if ($(this).find('input[name="datenschutz"]')[0].checked === false)
      return false;
    // rest of form

如果您想添加一条消息，可以按照以下方式进行：

$(form).submit(function(e) {
    e.preventDefault();
    if ($(this).find('input[name="datenschutz"]')[0].checked === false) {
      alert("Please accept the terms and conditions!");
      return false;
    }
    // rest of form

- Praveen Kumar Purushothaman

---

只是为了帮助稍微改进一下代码：$(form).find("input[name='datenschutz']"])，这样它就能找到该表单的复选框。 - Zander

我“更正”了一个拼写错误，如果您不同意我的更改，请谅解。如果您希望回滚更改，可以自由地这样做。 - David Thomas

@Cheshire 看看这个。我已经在我的答案中包含了它。 - Praveen Kumar Purushothaman

@DavidThomas，那是一种非常正确的“想要”的非正式方式。:P 如果你希望我更专业，没问题。哈哈。 - Praveen Kumar Purushothaman

如果复选框被选中，表单将不会像平常一样提交，因此e.preventDefault();应该在if语句内部。 - aletede91

Answer 2

我建议在复选框被选中时启用提交按钮：

// binding an anonymous function to handle the change event:
$('input[name=datenschutz]').on('change', function () {
    var input = this;

    // navigating to the form 'this.form',
    // finding the submit button (obviously correct the
    // selector),
    // setting the disabled property of the submit button to
    // to be false when the check-box is checked, and true
    // when the check-box is unchecked:
    $(input.form).find('submitButtonSelector').prop('disabled', !input.checked});
});

- David Thomas