0

我有一个提交时需要使用 jQuery 验证的表单。通常我只会使用 jQuery validate 插件，但不幸的是在这种情况下不能使用它，因为不需要错误消息，只需更改样式即可。

考虑以下代码：

 $(document).ready(function (){
    $('.submitJobform').on('submit', function(e) {
        if( !$('.required').value ){
            $(this).css('background-color','red');
        }

        e.preventDefault();  //prevent form from submitting
    });
 });

按下提交按钮时，如果 .required 类的文本字段没有值，则整个表单背景变为红色。我认为使用 $this 关键字会选择已发现不包含任何值的当前值，但事实并非如此。有没有办法强制 $(this) 引用有问题的文本项，或者是否有替代方法，以便只有文本字段的背景变为红色？

提前致谢

热兹平

4

5 回答 5

3 
$('.submitJobform').on('submit', function (e) {
    $('.required').each(function () {
        if (!this.value) {
            $(this).css('background-color', 'red');
        }
    });
    e.preventDefault(); //prevent form from submitting
});
});
于 2013-08-30T12:22:01.263 回答
0

试试这个，但请记住这一点，只有当您的表单只有一个必需元素时它才会起作用。如果您有多个具有“必需”类的必需元素，那么您必须为选择器运行foreeach并相应地处理每个元素。

 $(document).ready(function (){
    $('.submitJobform').on('submit', function(e) {
        $( ".required" ).each(function( index ) {
            if( !$(this).value ){
               $(this).css('background-color','red');
            }
          });

        e.preventDefault();  //prevent form from submitting
    });
 });
于 2013-08-30T12:18:27.967 回答
0

尝试这个：

$('.submitJobform').on('submit', function(e) {
    if( !$('.required').value ){
        $('.required').css('background-color','red');
    }

    e.preventDefault();  //prevent form from submitting
});

或者，如果你有不止一堂课.required，你可以这样做：

$('.submitJobform').on('submit', function(e) {
    $('.required').each(function() {
        if( !$(this).value ){
            $(this).css('background-color','red');
        }
    });

    e.preventDefault();  //prevent form from submitting
});
于 2013-08-30T12:18:55.703 回答
0

在您的代码中，this变量属于表单，因为表单被提交，因此函数被调用。要检查输入，您需要查看它们：

$(document).ready(function (){
    $('.submitJobform').on('submit', function(e) {

        // here this is the form
        $(this).find('.required').each(function() {
            // here this is the current element matched in the each loop
            var input = $(this);

            if (!input.val()) input.css('background-color','red');
        });

        e.preventDefault();  //prevent form from submitting
    });
 });
于 2013-08-30T12:21:04.500 回答
0

引用操作：

“通常我只会使用 jQuery 验证插件，但遗憾的是在这种情况下不能使用它，因为不需要错误消息，只需更改样式即可。”

您可以在使用 jQuery Validation 插件时轻松关闭验证消息。return false只需在回调函数中放置 a 即可errorPlacement终止消息。然后.error根据需要使用 CSS 设置类的样式。

$(document).ready(function() {

    $('.submitJobform').validate({
        // rules, options & callbacks,
        errorPlacement: function() {
            return false;
        }
    });

});

演示：http: //jsfiddle.net/eKbmZ/1/

于 2013-08-30T17:25:37.733 回答