Question

我是jQuery的新手，我有以下jQuery行。我的目的是“提交”以检查输入文本值是否已填写并检查单选按钮是否被选中或选中，如果不是，则将文本设为红色，但我不确定如何将两者合并。

现在它有点儿麻烦，因为它提交IF文本已填充并忽略了单选按钮但它在提交之前使文本变为红色。所以它工作的不是我想要的。

的jQuery

$('#form3096').submit(function (e) {
    if (!$('#check-sm input:text').filter(function () {
        return $.trim(this.value) != ""
    }).length) {
         $('.social-heading').css('color','red');

    }
});

   $('#form3096').submit(function(e) {
    if ($('input:radio', this).is(':checked')) {
        // everything's fine...
    } else {
        $('.radio-options').css('color','red');
    }
});

Answer 1

致电e.preventDefault()以阻止正常的表单提交。

$('#form3096').submit(function (e) {
    if (!$('#check-sm input:text').filter(function () {
        return $.trim(this.value) != ""
    }).length) {
        $('.social-heading').css('color','red');
        e.preventDefault();
    }
});

$('#form3096').submit(function(e) {
    if ($('input:radio', this).is(':checked')) {
        // everything's fine...
    } else {
        $('.radio-options').css('color','red');
        e.preventDefault();
    }
});

Answer 2

我喜欢将我的验证分成单个单元并在最后将它们组合在一起。它使阅读，维护和测试更容易。

$('#form3096').submit(function (e) {
  var isFieldPopulated, isRadioChecked;

  isFieldPopulated = $('#check-sm input:text').filter(function () {
    return $.trim(this.value) !== "";
  }).length > 0;

  if (!isFieldPopulated) {
    $('.social-heading').css('color','red');
  }

  isRadioChecked = $('input:radio', this).is(':checked');
  if (!isRadioChecked) {
    $('.radio-options').css('color','red');
  }

  return isFieldPopulated && isRadioChecked;
});

Answer 3

你可以试试这个

$('#form3096').submit(function (e) {
    var len = $('#check-sm input:text').filter(function () {
        return $.trim(this.value) != ""
    }).length;
    if (!len) {
         $('.social-heading').css('color','red');
         e.preventDefault();

    }
    if(!$('input:radio', this).is(':checked')){
         $('.radio-options').css('color','red');
         e.preventDefault();
    }
});

Answer 4

$('#form3096').submit(function (e) {
    if (!$.trim($('#check-sm input:text').val()) {
         $('.social-heading').css('color','red');
         return false;
    }

    if ($('input:radio', this).is(':checked')) {
        // everything's fine...
        return true;
    } else {
        $('.radio-options').css('color','red');
        return false;
    }
});

如何在提交时正确组合两个功能

4 个答案: