JQuery валидации errorClass не работает должным образом - PullRequest
Новая
       10

JQuery валидации errorClass не работает должным образом

0 голосов
/ 16 октября 2011

Что происходит, когда вы просто нажимаете «Отправить», только текстовое поле тела сообщения становится красным, а это означает, что errorClass: 'errorField' был применен к нему, как и должно быть, но другие элементы делаютне краснеть, как они должны.

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

Наконец, как мне сделать так, чтобы класс errorField переопределял класс фокуса?

Спасибо за вашу помощь!

HTML: 

    <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="style/message.css">
<script type="text/javascript">
    $(document).ready(function() {
        $("#message-form").validate({
        errorClass: 'errorField',
        errorPlacement: function(error,element) {
                       return true;
            }
        });
    });

</script>
</head>
<body>
    blue = focus, green=notFocus, red=error
<div id="message-wrapper">
    <form id="message-form" method="POST" action="">
        <table>
            <tr>
                <td width="70px"><label for="message-email">From:</label></td>
                <td><input type="text" name="message-email" id="message-email" class="message-input required email" /></td>
            </tr>
            <tr>
                <td><label for="message-subject">Subject:</label>  </td>
                <td><input type="text" name="message-subject" id="message-subject" class="message-input required" minlength="5"/></td>
            </tr>
            <tr>
                <td><label for="message-body" style="vertical-align: top">Message:</label>  </td>
                <td><textarea name="message-body" id="message-body" rows="4" cols="40" class="message-input required"></textarea></td>
            </tr>
        </table>

        <input type="hidden" name="contact" value="1" />

        <p><button type="submit">Send</button></p>
    </form>
</div>
</body>

CSS: 

div#message-wrapper{
    width: 300px;
    height: 400px;
}
input[type="text"], textarea {
    /* background:#F4F4F4; */
    background: green;
    color: white;
    border: solid 2px #DFDFDF;
}
input[type="text"]:focus, textarea:focus {
    /* background:#F2F4F8; */
    background: blue;
    color: white;
    border:solid 2px #333;
    outline: 0;
}
.errorField{
    /* background:#faf6d1; */
    background: red;
    color:black;
    border:solid 1px #333;
}
.message-input{
    width: 341px;
}

1 Ответ

0 голосов
/ 16 октября 2012

Селекторы являются проблемой:

  • input[type="text"] более конкретно, чем .message-input, поэтому цвет фона не меняется
  • Используйте input.message-input:focus вместо input[type="text"]:focus и input.message-input.errorField:focus вместо .errorField
...