Как мне выполнить проверку формы на стороне клиента в jQuery?

Question

Я пытаюсь использовать этот плагин: http://docs.jquery.com/Plugins/Validation

Где #user_new - это идентификатор моей формы, вот как выглядит мой код:

$('#user_new').validate({
    rules: {
        user[username]: "required",
        user[email]: {
            required: true,
            email: true
        }
    },
    messages: {
        user[username]: "Please specify your name",
        user[email]: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
})

Где этокак выглядят мои поля ввода при визуализации страницы (генерируется Rails):

<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br /> 
        <input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br /> 
        <input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br /> 
        <input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br /> 
        <input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br /> 
        <input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br /> 

Я просто пытался сначала проверить имя пользователя и адрес электронной почты.Затем возьмите его оттуда.

Я не могу понять, как определить синтаксис и правила работы с этим плагином.

Help!

Edit1: Вот вывод HTML для тега формы:

<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post">

Что касается вопроса об отладке, когда я включаю его так:

$('#user_new').validate({
    debug: true,
    rules: {
        user_username: "required",
        user_email: {
            required: true,
            email: true
        }
    },
    messages: {
        user_username: "Please specify your name",
        user_email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

Я ничего не вижу вмоя консоль JS.

Edit2: Когда я очищаю свои данные для входа в систему и нажимаю "Отправить", он не будет отправлен.Не уверен, что это как-то связано с действующей функцией validate ().Но я не вижу никаких всплывающих сообщений или чего-то в этом роде.

Edit3: Кажется, что проблема может заключаться в разрыве между полями идентификатора и имени, которые называются по-разному.Однако Rails присваивает имя и идентификатор обоим полям, поэтому не уверен, как это исправить.

Edit4: я нашел решение.Я добавил его в комментарий под выбранным ответом.

Answer 1

Я думаю, это потому, что значение атрибута "name" в форме (входной тег) не соответствует опции проверки jquery

$('#user_new').validate({
    debug: true,
    rules: {
        user_username: "required", // should be: "user[username]"
        user_email: { // should be: "user[email]"
            required: true,
            email: true
        }
    },
    messages: {
        user_username: "Please specify your name", // should be: "user[username]"
        user_email: { // should be: "user[email]"
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

Редактировать: взгляните на этот вопрос, я думаю, у него та же проблема, что и у вас jquery.validate in cakePHP

Edit2: чтобы изменить способ отображения, поместите контейнер сразу после входного тега, скажем,

<div id="username_error"></div>//for username error message

добавить следующие коды:

$('#user_new').validate({
    debug: true,
    rules: {
        //rules
    },
    messages: {
        //messages
    },
    errorPlacement: function(error, element) {
        if ( element.is(":radio") )
            error.appendTo( element.parent().next());//if its a radio button
        else if ( element.is(":checkbox") )
            error.appendTo ( element.next() );//if its a radio button
        else
            error.appendTo( element.parent().next() );
    },//these lines of codes basically telling the jquery.validate plug-in to look for an element after
});

, а затем применить некоторые CSS для приближения

<style>
#username_error{
   //a little something something
}
</style>

или вы всегда можете проверить документацию 1018 * для дальнейших модификаций

Answer 2

Попробуйте это:

$('#user_new').validate({
    rules: {
        user_l_name: "required",
        user_email: {
            required: true,
            email: true
        }
    },
    messages: {
        user_l_name: "Please specify your name",
        user_email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
})

Пожалуйста, убедитесь, что переменные, которые вы используете в правилах и массаже, совпадают с вашими входными идентификаторами и именем. Я пытаюсь сказать, что ваши входные Id и Name должны совпадать, чтобы это работало.

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

Удачного кодирования !!!!

Answer 3

Пожалуйста, проверьте этот сайт http://bassistance.de/jquery-plugins/jquery-plugin-validation. у них есть несколько примеров относительно проверки JQuery.

Надеюсь, что это помогает ...

Счастливое кодирование !!!

Answer 4

Не совсем уверен, почему вышесказанное не работает сам.Может быть, кто-то еще может заметить это ... Но пока взглянем на опцию отладки в документации.Что вы получите, когда включите эту опцию?