7

Firefox または Chrome でこれら 2 つのフィドルを確認してください。この例ではrequired、属性とsubmitボタンを備えた単純なフォームしかありません。ボックスが空のときに「送信」を押すと、スタイルが適用されますinvalid(Firefox では赤いアウトライン)。ただし、送信を押して無効であることを示すまで待機します。

今これを試してみてください。いくつかのcssがあることを除いて、同じです：

input:invalid{
    border-color:orange
}

今回を除いて、送信が押される前でもオレンジ色の境界線が適用されます。そのため、フォームのスタイルを手動で設定した場合にのみinvalid、ブラウザーはそれを適用する前にそれを適用しますが、これは直感的な動作ではありません。もちろん、何かを入力する前に必須フィールドは無効になります。

これを修正する方法はありますか？

4

3 に答える 3

3

探しているものは次のとおりです: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

次のようにスタイルします。

form.submitted input:invalid{
    border-color:orange
}

そして、次の js を追加します。

$('input[type="submit"]').click( function(){
    $('form').addClass('submitted');
});

JavaScript なしでこれを達成する方法はまだないと思います。

于 2014-11-19T16:29:53.457 に答える