Question

我有一个包含文本字段和drodowns的表单。我正在尝试验证下拉列表更改的下拉列表并提交表单。

var flag = false;
$('#submit_form .required').change(function (e) {
    var input = $(this);
    input.next('ul.error_text').remove();
    input.removeClass('highlight');
    if (!input.val()) {
        input.removeClass('green');
        input.addClass('highlight');
        var $msg = input.attr('title');
        input.after('<ul class="error_text"><li>' + $msg + '</li></ul>');
        flag = true;
    } else {
        if (flag == true) {
            input.addClass('green');
        } else {
            input.next('ul.error_text').remove();
            input.removeClass('highlight');
            input.removeClass('green');
        }
    }
});
var flag1 = true;
$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('ul.error_text').remove();
    input.removeClass('highlight');
    if (!input.val()) {
        input.removeClass('green');
        input.addClass('highlight');
        var $msg = input.attr('title');
        input.after('<ul class="error_text"><li>' + $msg + '</li></ul>');
        flag = true;
        flag1 = false;
    }
});
return flag1;

在提交表单时，如果在下拉列表中未选择任何值，则应显示红色并显示所需文本。在选择值时，下拉列表应变为绿色。现在，如果没有选择任何值，则会出现红色突出显示，但下面的必需文本不会出现。此外，如果我选择一个值，红色突出显示不会变为绿色。我叮叮当然我在这里错过了什么......有人可以帮我解决一下吗？

Answer 1

这是在任何函数之外（最后一行），它应该在函数中：

return flag1;

在此修改：

var flag = false;
$('#submit_form .required').change(function (e) {
    var input = $(this);
    input.next('ul.error_text').remove();
    input.removeClass('highlight');
    if (!input.val()) {
        input.removeClass('green');
        input.addClass('highlight');
        var $msg = input.attr('title');
        input.after('<ul class="error_text"><li>' + $msg + '</li></ul>');
        flag = true;
    } else {
        if (flag == true) {
            input.addClass('green');
        } else {
            input.next('ul.error_text').remove();
            input.removeClass('highlight');
            input.removeClass('green');
        }
    }
});
var flag1 = true;
$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('ul.error_text').remove();
    input.removeClass('highlight');
    if (!input.val()) {
        input.removeClass('green');
        input.addClass('highlight');
        var $msg = input.attr('title');
        input.after('<ul class="error_text"><li>' + $msg + '</li></ul>');
        flag = true;
        flag1 = false;
    }
    return flag1;
});

Answer 2

您必须在提交功能中添加return flag1;：

$('#submit_form').submit(function () {
    var flag1 = true;
    $('#submit_form .required').filter(':visible').each(function () {
       var input = $(this);
       input.next('ul.error_text').remove();
       input.removeClass('highlight');
       if (!input.val()) {
          input.removeClass('green');
          input.addClass('highlight');
          var $msg = input.attr('title');
          input.after('<ul class="error_text"><li>' + $msg + '</li></ul>');
          flag = true;
          flag1 = false;
       }
   });
   return flag1; //<----------place here...
});  //<----------------- end of submit

Fiddle to try

addClass和removeClass没有被正确调用

2 个答案: