jQuery Подтвердить, что правила не применяются ко всей форме, если выбрано одно правило переключателя - PullRequest
Новая
       5

jQuery Подтвердить, что правила не применяются ко всей форме, если выбрано одно правило переключателя

3 голосов
/ 02 декабря 2011

У меня есть форма, состоящая из:

  • 3 текстовых поля (первые два поля обязательны для заполнения)
  • 3 набора из 20 переключателей (стилизованных с использованием рейтинга jQuery), каждыйиз которых требуется
  • 1 текстовая область, которая также является обязательной.

Если установлен только один из переключателей и никакие другие поля не имеют допустимых данных, будет отправлена ​​вся форма.Похоже, что если установлен какой-либо один переключатель, остальные правила проверки не будут работать.

Если вы попытаетесь отправить пустую форму, проверка активируется, и в каждом поле правильно отображаются ошибки.

Если вы заполните все поля, кроме какой-либо радиокнопки, проверка корректно отобразит ошибку рядом с каждым набором и не отправит.

Может кто-нибудь сказать мне, что я делаю неправильно ???Я использую jQuery 1.6.1 и jQuery Validation Plugin 1.8.1 

$(document).ready(function() {
    // validate contact form on keyup and submit
    $("#ratingfrm").validate({
        errorElement: "span",    

        //set the rules for the fild names
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength:25
            },
            email: {
                required: true,
                email: true
            },
            website: {
                required: false,
                minlength: 5,
                maxlength:65
            },
            rating1: {required: true},
            rating2: {required: true},
            rating3: {required: true},
            rating4: {required: true},          
            comment: {
                required :true,
                minlength:5
            }
        },

        //set messages to appear inline
        messages: { 
            name: {
                required: "<br>Your name is required.",
                minlength: "<br>Please enter a minimum of 3 characters",
                maxlength: "<br>Please enter a maximum of 25 characters"
            },      
            email: "<br>A valid email is required.",        
            website: {
                required: "<br>Please enter a valid website address",
                minlength: "<br>Please enter a minimum of 5 characters",
                maxlength: "<br>Please enter a maximum of 65 characters"
            },      
            rating1: "Please rate",
            rating2: "Please rate",
            rating3: "Please rate",
            rating4: "Please rate",     
            comment: {
                required: "<br>Please enter a comment",
                minlength: "<br>Please enter a minimum of 5 characters"
            }       
        },
        errorPlacement: function(error, element) {
            error.insertAfter( element );
        }
    });
});

Код формы: 

<form id="ratingfrm" name="ratingfrm" method="post" accept-charset="utf-8" action="/rateinput">
<fieldset class="one-fourth">
    <input type="hidden" name="RID" value="154341X">

    <label for="name">Name</label><br />
    <input type="text" name="name" value=""  />                           
    <br /><br />

    <label for="email">Email</label><br />                          
    <input class="input" id="email" name="email" type="text" /> <br />
    We will not publish or share your<br />email address with anyone else.<br /><br />

    <label for="website">Website:</label><br />
    <input class="input" id="website" name="website" type="text" />
</fieldset> <!-- /one-fourth -->

<fieldset class="one-fourth">

    <strong>Accommodation:</strong>
    <div class="Clear">
        <input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="1 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="2 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="3 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="4 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="5 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="6 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="7 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="8 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="9 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="10 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="11 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="12 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="13 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="14 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="15 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="16 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="17 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="18 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="19 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="20 " />                               
    </div><br />

    <strong>Facilities:</strong>
    <div class="Clear">
    <input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="20"/>                               
    </div><br />

    <strong>Cleanliness:</strong>
    <div class="Clear">
    <input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="20"/>                               
    </div><br />    

    <br /><strong>Value for Money:</strong>
    <div class="Clear">
    <input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="20"/>                               
    </div><br />    

</fieldset> <!-- /one-fourth -->

<fieldset class="one-half last">
    <strong>Comments:</strong><br />     
    <textarea name="comment" cols="180" rows="7" id="comment" style="width:100%" ></textarea>                             
    <br />

    <input type="submit" name="submit" value="SUBMIT"  />                       

</fieldset> <!-- /one-half last-->

1 Ответ

1 голос
/ 02 декабря 2011

Я только что запустил ваш код, и он, кажется, работает.Я добавил следующий код в опции .validate(): 

        submitHandler: function () {
            alert("do submit");
            return false;
        },
        invalidHandler: function () {
            alert("invalid form");
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...