jQuery - выделение неправильных или недействительных полей красным цветом.

0

У меня есть форма регистрации, и я хотел бы, чтобы неправильные поля имели красный контур, что означает, что есть ошибка. Я попытался использовать jQuery Validator, но по какой-то причине это не сработало.

Будет ли шанс, что кто-нибудь может предоставить пример о том, как это сделать в jQuery, используя следующую разметку HTML?

<div class="content">
    <form class="formlogin" action="" method="POST">
        <p class="Title">Signup</p>
        <input id="username" placeholder="Username" name="username" type="text">
        <input id="Firstname" placeholder="First name" name="firstname" type="text">
        <input id="lastname" placeholder="Last name" name="lastname" type="text">
        <input id="email" placeholder="Email" name="email" type="text">
        <input id="password" placeholder="password" name="password" type="password">
        <input id="register" name="SignUp" type="submit" value="Sign Up">
    </form>
</div>
  • 0
    Что говорит гугл?
  • 0
    Как говорит @Pavlo, Google это. Я уверен, что валидатор jQuery требует, чтобы ВЫ добавили класс в обязательные поля, что-то вроде <input class="required" name="username" .. Но просто прочитайте, где вы скачали свой валидатор.
Показать ещё 4 комментария
Теги:

1 ответ

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

Попробуйте следующее:

$('form.formlogin').submit(function(f_submit) {
    var selector = $(this);        // I tent to store the element just in case I need to use it later.

    var input_username = selector.children("input#username"); // The username element.
    var input_email = selector.children("input#email"); // The email element.
    var val_username = input_username.val();    // Get the content of the username field.
    var val_email = input_email.val();
    var regex_username = /^[A-Za-z\d_-]+$/;    // In this example,
    // the characters after the "\d" in the regex are accepted. (the "_", and "-");
    var regex_email = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;

    if( val_username.match(regex_username) == null ) {
        input_username.css("border-color","#F00");
    } else {
        input_username.css("border-color","#000000");
    }

    if( val_email.match(regex_email) == null ) {
        input_email.css("border-color","#F00");
    } else {
        input_email.css("border-color","#000000");
    }

    // Prevent page refresh.
    // You can replace this with an AJAX system.
    return false;
});

Так как понадобилось всего несколько минут, чтобы бросить вместе, и это может быть не лучший пример, здесь ссылка на него на JSFiddle: http://jsfiddle.net/F52mY/1/

Использование jQuery 2.1.0, но я считаю, что 1.6.x и ниже работают.

Поделиться
  • 0
    (f_submit) почему там?
  • 0
    Uncaught TypeError: У объекта form.formsignup нет метода 'submit', о чем говорит консоль
Показать ещё 1 комментарий

Ещё вопросы

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