10

とにかく、エラーが発生したときに境界線の色を赤に変更して、テキストを削除することはできますか？これが私が表示したい唯一のエラーであり、入力/テキストエリアがフォーカスされると消えます。

<div id="contact-form">
            <form method="get" id="contacts">
                <div class="contact-controls">
                    <label class="contact-label" for="name-input">NAME</label>
                    <div class="input-wrapper">
                        <input type="text" name="contact-name" id="name-input" placeholder="Your Name" required>
                    </div>
                </div>
                <div class="contact-controls">
                    <label class="contact-label" for="email-input">EMAIL</label>
                    <div class="input-wrapper">
                        <input type="text" name="contact-email" id="email-input" placeholder="Your Email" required>
                    </div>
                </div>
                <div class="contact-controls">
                    <label class="contact-label" for="message-input">MESSAGE</label>
                    <div class="input-wrapper">
                        <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" required></textarea>
                    </div>
                </div>
                <div class="contact-controls">
                    <input type="hidden" name="save" value="contact">  
                    <button type="submit" class="contact-button">Send</button>  
                </div>
            </form>
        </div>
4

5 に答える 5

20

以下をせよ：

1）エラーメッセージテキストを抑制するようにerrorPlacementコールバック関数を設定します。return false

2）プラグインのCSSを変更して.error、.valid class要素の周囲に色付きの境界線などを表示します。デフォルトでは、プラグインはすでにこれら2つを自動的に適用および削除するclassため、これに設定する特別なプラグインオプションはありません。

動作中のデモ：http ： //jsfiddle.net/8vQFd/

jQuery：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and options,
        errorPlacement: function(){
            return false;  // suppresses error message text
        }
    });

});
于 2013-03-25T02:29:11.730 に答える
1

Jqueryなし他の追加/機能の変更Cssを追加するだけ

input[class="error"]{border:1px solid #f00 !important;} input[class="form control error"]{border:1px solid #f00 !important;} .error p{color:#f00 !important;}
于 2017-10-13T10:01:24.393 に答える
0

検証ルールが破られたときにjQuery検証プラグインによって入力要素に追加される.input-validation-errorという名前のCSSクラスを定義できます。

.input-validation-error {
    border: solid 1px #ff0000;
}

于 2018-06-04T11:55:31.387 に答える
0

非常に単純なcssベースのメソッドは、次のようになります。

input.error{border: 1px solid red;}

あなたはおそらくこれを拡張したいと思うでしょうが、それは良い出発点です。

于 2021-11-11T06:50:15.870 に答える
-1

入力/テキストエリアに赤い境界線を追加するクラスを追加できます

私はそれを.errorと呼んだ

input:focus,textarea:focus{
outline: none !important;
}

input.error, textarea.error{
outline:red groove thin;
}

次に、jqueryを使用して、クラス'.error'の入力/textareasを検索し、その値を空に設定して空白にします。

$(document).ready(function() {
  $('#contact-form').find('.error').val(' ');
});

Jsfiddle V1

更新しました

JSの例

 $(document).ready(function() {
  $('#contact-form').find('.error').val(' ');
    $('input, textarea').click(function() {
    $(this).removeClass('error').val('');
   });

    var name = $('#name-input').val();

    if(name == ''){
      $('#name-input').addClass('error');   
    }
   });

CSS

 input:focus,textarea:focus{
  border-color: initial;
 }

 input.error, textarea.error{
  border:1px solid red;
 }

HTML

<div id="contact-form">
        <form method="get" id="contacts">
            <div class="contact-controls">
                <label class="contact-label" for="name-input">NAME</label>
                <div class="input-wrapper">
                    <input type="text" name="contact-name" id="name-input" placeholder="Your Name" value="" class="" required>
                </div>
            </div>
            <div class="contact-controls">
                <label class="contact-label" for="email-input">EMAIL</label>
                <div class="input-wrapper">
                    <input type="email" name="contact-email" id="email-input" placeholder="Your Email" value="" class="" required>
                </div>
            </div>
            <div class="contact-controls">
                <label class="contact-label" for="message-input">MESSAGE</label>
                <div class="input-wrapper">
                    <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" class="" required></textarea>
                </div>
            </div>
            <div class="contact-controls">
                <input type="hidden" name="save" value="contact">  
                <button type="submit" class="contact-button">Send</button>  
            </div>
        </form>
    </div>

JSfiddle V2

于 2013-03-25T01:47:35.450 に答える