Question

我有一张表格。

<form id="form" action="javascript:void(0);" onsubmit="ajax()"> 
    <div class="element">
        <label for="first_name">Фамилия</label>
        <input type="text" id="first_name" class="text" name="first_name" />
    </div>
    <div class="element">
        <label for="second_name">Имя</label>
        <input type="text" id="second_name" class="text" name="second_name" />
    </div>
    <div class="element">
        <label for="last_name">Отчество</label>
        <input type="text" id="last_name" class="text" name="last_name" />
    </div>
    <div class="element">
        <label for="course">На каком вы курсе</label>
        <input type="text" id="course" class="text" name="course" />
    </div>
    <div class="element">
        <label for="math">Математика</label>
        <input type="text" id="math" class="text" name="math" />
    </div>
    <div class="element">
        <label for="programming">Программирование</label>
        <input type="text" id="programming" class="text" name="programming" />
    </div>
    <div class="element">
        <label for="english">Английский язык</label>
        <input type="text" id="english" class="text" name="english" />
    </div>
    <div class="element">
        <label for="history">История</label>
        <input type="text" id="history" class="text" name="history" />
    </div>
    <div class="element">
        <input type="submit" id="send" class="send" />
    </div>
</form>

这是我的验证员

$(document).ready(function(){ //Валидация формы
    $(".send").validation(
        $("#first_name").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите корректное имя</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".name").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#second_name").validate({
            test: "blank email",
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите корректный email</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".email").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#last_name").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите тему</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".subject").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#course").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите сообщение</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".message").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#math").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите сообщение</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".message").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#programming").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите сообщение</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".message").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#english").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите сообщение</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".message").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        }),
        $("#history").validate({
            test: "blank", 
            invalid: function(){
                if($(this).nextAll(".error").notExists()) {
                    $(this).after('<div class="error">Введите сообщение</div>');
                    $(this).nextAll(".error").delay(2000).fadeOut("slow");
                    setTimeout(function () {
                        $(".message").next(".error").remove();
                    }, 2600);
                }
            },
            valid: function(){
                $(this).nextAll(".error").remove();
            }
        })
    );
});

fiels first_name，second_name，last_name，course是必需的。其他（数学，编程，历史，英语）它们也是必需的，但只有其中一个，我的意思是如果其中任何一个被填充，它通过验证。我怎么能这样做？

Answer 1

您的代码：

$(document).ready(function() {
    $(".send").validation(  //  < -- what is this?
        $("#first_name").validate({
            test: "blank",         // <-- no such option
            invalid: function() {  // <-- no such option
                ....
            },
            valid: function() {    // <-- no such option
                ....
            }
        });
        $("#second_name").validate({
            ......
        });
    );
});

你的代码真的坏了。你不能只是从空气弥补插件的选项;它们需要由插件的开发人员定义，然后才能使用它们。

1）如果您正在使用jQuery Validation插件，那么为什么所有对.validate()的调用都填充在名为.validation()的内容中？什么是.validation()应该是什么？没有为此插件定义此类方法。

2）没有名为test的jQuery Validate插件选项。 See all options

3）没有名为valid和invalid的jQuery Validate插件回调函数。使用highlight，unhighlight，errorPlacement和success回调函数来控制错误的放置和切换。

4）您没有将.validate()附加到表单上的每个输入元素。它只附加到form元素，并且只在DOM ready事件中调用一次以初始化插件。

5）使用jQuery时不需要任何内联JavaScript，.ajax()属于插件的submitHandler回调函数。

我建议你......

阅读online documentation
关注examples provided
阅读the SO tag wiki
查看标有jquery-validate的各种SO问题中的代码。

否则，这是一个非常基本的工作示例：

<强> HTML ：

<form id="myform">
    <input type="text" name="foo" />
    <input type="text" name="bar" />
    <input type="submit" />
</form>

<强>的jQuery ：

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            foo: {
                required: true
            },
            bar: {
                required: true
            }
        },
        submitHandler: function (form) {
            // ajax goes here
            return false;
        }
    });

});

DEMO http://jsfiddle.net/QKvB4/

修复完所有问题后，请添加the additional-methods.js file并使用require_from_group方法从一组字段中创建至少一个字段。

jQuery表单验证器 - 至少填充一个输入

1 个答案: