Получение не может вызвать метод undefined, используя JQuery Form Validator

0

Я использую валидатор формы JQuery (http://formvalidator.net/), и у меня возникают проблемы с проверкой ящиков SELECT. Я искал этот сайт и не нашел НИЧЕГО. Я нашел эту статью в StackOverflow. (проверка правильности выбора jQuery)

Но это не работает... Я получаю "не могу вызвать метод неопределенного".

$(document).ready(function() {

    //First validate the form
        $.validate({
            addValidClassOnAll: true,
            rules: {
                states: {
                    requiredState: true
                },
                color: {

                    requiredColor: true
                },
                size: {

                    requiredSize: true
                }
            },
            onError: function() {
                console.log('Form Validation failed');
                return false;
            },
            onSuccess: function() {
                console.log('Form is valid!');
                return true; //Return False Will stop the submission of the form
            }
        });

        $.validator.addMethod('requiredState', function(value) {
            return (value !== 'XX');
        }, "State required");
        $.validator.addMethod('requiredColor', function(value) {
            return (value !== 'select');
        }, "Please select a Color");    
        $.validator.addMethod('requiredSize', function(value) {
            return (value !== 'select');
        }, "Please select a Size");    

    });

Используя js файл: jquery.form-validator.js, нет необходимости предиповать $.validate... с именем формы. Но если я это сделаю, валидатор не работает.

Но если я этого не делаю, addMethod() не работает... Поэтому я застрял между камнем и твердым местом.

Любые предложения будут полезны.

Спасибо вам всем.

Питер

UPDATE: здесь поливается HTML

<!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width" />
            <meta name="keywords" content="jquery, plugin, scratchpad, scratchcard, scratch" />
            <meta name="description" content="A jQuery plugin to mimic a scratch card or pad behaviour.  Allowing you to scratch off an overlay as either a color or image." />


            <title>MyTitle for Testing</title>

            <!-- CSS -->
            <link rel="Stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
            <link rel="Stylesheet" type="text/css" href="css/bootstrap-form.css" />


        </head>
        <body>

            <div id="content3">


                    <div id="content-new" class="contentShipping">

                        <form id="formNewShip" class="bootstrap-frm" action="someFormProcessor.php" method="post">
                            <h1 style="float: left;">Enter your shipping address</h1>
                            <div style="float: left; width: 255px;">
                                <label style="vertical-align: middle;display:none;">First Name:&nbsp;</label>
                                <input type="text" id="fname" name="fname" size="25" maxlength="20" 
                                       placeholder="First Name"  data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Last Name:&nbsp;</label>
                                <input type="text" id="lname" name="lname"  size="35" maxlength="35" 
                                       placeholder="Last Name" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <br>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Address:&nbsp;</label>
                                <input type="text" id="address" name="address" size="30" maxlength="45" 
                                       placeholder="Address" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: left; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Apt/Ste:&nbsp;</label>
                                <input type="text" id="aptste" name="aptste" size="15" maxlength="10" 
                                       placeholder="Apt/Ste" />
                                <br>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">City:&nbsp;</label>
                                <input type="text" id="city" name="city" size="30" maxlength="45" 
                                       placeholder="City" data-validation="alphanumeric" />
                                <br>
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">State:&nbsp;</label>
                                <select id="states" name="states" title='Select your state.'>
                                    <option value="XX" selected="selected">State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District Of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                                <br>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Zip Code:&nbsp;</label>
                                <input type="text" id="zipcode" name="zipcode" size="30" 
                                       maxlength="5" placeholder="Zip Code"
                                       data-validation="USAZipCode" />
                                <br>
                            </div> 
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Size:&nbsp;</label>
                                <select id="size" name="size" title='Select your size.'>
                                    <option value="select" selected="selected">Size</option>
                                    <option value="small">Small</option>
                                    <option value="medium">Medium</option>
                                    <option value="large">Large</option>
                                </select>
                            </div>
                            <div style="float: left; width: 262px;">
                                <label style="vertical-align: middle;display:none;">Color:&nbsp;</label>
                                <select id="color" name="color" title='Select your color.'>
                                    <option value="select" selected="selected">Color</option>
                                    <option value="red">Red</option>
                                    <option value="blue">Blue</option>
                                </select>                            
                            </div>
                            <div style="float: right; width: 255px;">
                                <label style="vertical-align: middle;display:none;">Email:&nbsp;</label>
                                <input type="text" id="email" name="email"  size="30" maxlength="100" 
                                       placeholder="Email" data-validation="email" />
                                <br>
                            </div>
                            <div id="buttons" style="width: 210px;">
                                <div><button id="btnSubmit" type="submit" class="btn btn-primary center-block">Submit</button></div>
                        <!--        <div style="float: right;"><button id="btnReset" type="reset" class="btn btn-primary">Reset</button></div>-->
                            </div>                
                        </form>
                    </div>                

                </div>

                <div id="templates"></div>

            <script type="text/javascript" src="assets/jquery.1.9.1.min.js"></script>
            <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
            <script type="text/javascript" src="js/jquery.form.js"></script>
            <script type="text/javascript" src="js/jquery_form_validator/jquery.form-validator.js"></script>


        </body>
    </html>
  • 0
    Можете ли вы добавить свой HTML для полного теста на JSFIDDLE, пожалуйста?
  • 0
    Просто сделал ... Надеюсь, что помогает
Теги:
validation

2 ответа

0
Лучший ответ

Я сделал скрипку, и все работает нормально:

http://jsfiddle.net/BzRth/

Я добавил селектор onSuccess и onError обработчики onSuccess и onError поскольку они казались излишними, но поведение в точности так, как я ожидал.

Убедитесь, что вы используете ту же версию кода проверки подлинности jquery, что и моя скрипка (CDN по адресу http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js)

Поделиться
  • 0
    Хорошо, это работает, но опять же, если я определю форму следующим образом: $ ("# formNewShip"). Validate ({}); другие поля не проверяются с помощью jquery.form-validator.js. Следовательно, если я удаляю имя формы, выпадающие списки не проверяются ... это шесть из полутора десятков других ....
1

checkout this Fiddle это работает, вы должны объявить свои методы проверки до объявления правил и использования

$("#formNewShip").validate({})

Редактировать:

Чтобы потребовать первое, вы должны добавить это в свои правила:

fname: {
         required: true
        },
Поделиться
  • 0
    Хорошо, это круто, но остальные поля тоже должны быть проверены ... так что мне просто нужно сделать "метод добавления" для всех полей, верно?
  • 0
    но вы не определили проверки для других полей, это нормально. Я редактирую, чтобы показать пример, и зацените этот пример, чтобы иметь представление о jsfiddle.net/JWF7M

Ещё вопросы

Сообщество Overcoder
Наверх
Меню