плагин проверки jquery работает не для всех полей

#jquery #html #validation

#jquery #HTML #проверка

Вопрос:

У меня есть этот код, и когда я пытаюсь нажать кнопку отправить, он не проверяет какие-либо поля… я не знаю, как это решить .. пожалуйста, помогите с этим .. заранее спасибо.. все поля в форме обязательны для заполнения. Я должен проверять только с помощью плагина проверки jquery….

 <div>
    <form name="signUp" id="registerationForm">
         <h3> Sign Up For Free </h3>
        <label class="c1" for="usrEmail">User Email</label>
        <input type="text" name="usrEmail">
        <label class="c1" for="usrName">User Name</label>
        <input type="text" name="usrName">
        <label class="c1" for="pwd">Password</label>
        <input type="password" name="pwd">
        <label class="c2">I AM A</label>
        <label class="c2">
            <input type="radio" value="DESIGNER" name="position">DESIGNER</label>
        <label class="c2">
            <input type="radio" name="position" value="DEVELOPER">DEVELOPER</label>
        <label class="c2">
            <input type="radio" name="position" value="NEITHER, I JUST HAVE IDEAS">NEITHER, I JUST HAVE IDEAS</label>
        <label class="c2">
            <input type="checkbox" name="terms" value="agreements">I Have Read and Agree to the <span style="color:#097CA2"> Terms of Service </span> 
        </label>
        <input type="submit" id="submit" name="sign_up" value="SIGN UP NOW">
    </form>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $('#registerationForm').validate({
        rules: {
            usrEmail: {
                required: "true",
                email: "true"
            },
            usrName: "required",
            pwd: {
                pwd: "required",
                minlength: 5,
                maxlength: 18
            },
            terms: "required",
            position: "required",
        },
        messages: {
            usrEmail: "Please enter a valid email address",
            usrName: "Your Name is needed. Please enter it",
            pwd: {
                required: "please provide a password",
                minlength: "password must be minimum of 5 characters"
            },
            position: "Please select any position",
            terms: "please accept our policy"
        }
    });
});
</script>

1. где ваш код для запуска проверки?

2. прямо сейчас вы используете check в качестве пользовательского типа, чтобы проверить его при использовании щелчка $('.submit').click function(){ return false; if($(form).valid()) then submit , и если он вообще не проверяется, проверьте свой синтаксис

3. @ScottSelby я думаю, вам нужно прокрутить, чтобы увидеть код jquery

4. @vico пытался.. также проверил весь синтаксис .. его проверка не выполняется

Ответ №1:

У вас есть пара проблем в вашем Javascript.

Все true атрибуты должны быть без кавычек.
Первым атрибутом pwd должно быть required: true not pwd: "required" .

Вот исправленный код:

 <div>
    <form name="signUp" id="registerationForm">
         <h3> Sign Up For Free </h3>
        <label class="c1" for="usrEmail">User Email</label>
        <input type="text" name="usrEmail">
        <label class="c1" for="usrName">User Name</label>
        <input type="text" name="usrName">
        <label class="c1" for="pwd">Password</label>
        <input type="password" name="pwd">
        <label class="c2">I AM A</label>
        <label class="c2">
            <input type="radio" value="DESIGNER" name="position">DESIGNER</label>
        <label class="c2">
            <input type="radio" name="position" value="DEVELOPER">DEVELOPER</label>
        <label class="c2">
            <input type="radio" name="position" value="NEITHER, I JUST HAVE IDEAS">NEITHER, I JUST HAVE IDEAS</label>
        <label class="c2">
            <input type="checkbox" name="terms" value="agreements">I Have Read and Agree to the <span style="color:#097CA2"> Terms of Service </span> 
        </label>
        <input type="submit" id="submit" name="sign_up" value="SIGN UP NOW">
    </form>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $('#registerationForm').validate({
        rules: {
            usrEmail: {
                required: true,
                email: true
            },
            usrName: "required",
            pwd: {
                required: true,
                minlength: 5,
                maxlength: 18
            },
            terms: "required",
            position: "required",
        },
        messages: {
            usrEmail: "Please enter a valid email address",
            usrName: "Your Name is needed. Please enter it",
            pwd: {
                required: "please provide a password",
                minlength: "password must be minimum of 5 characters"
            },
            position: "Please select any position",
            terms: "please accept our policy"
        }
    });
});
</script>

Ответ №2:

Просто уберите кавычки. напишите true вместо того, чтобы писать «true».

Ответ №3:

Я думаю, что плагин ищет IDs .

Попробуйте добавить атрибут Id:

 <input type="text" name="usrEmail" id="usrEmail">