1
フォームで作業しています。入力フィールドが空でない場合、アラートが表示されます。エラーが発生すると(空のフィールドが送信されます)、入力にクラスが追加され、スタイルが適用されます。jqueryを使用して条件が確認されたときにアラートを表示します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".form-register").submit(function (e) {
e.preventDefault();
if($(this).find('.error')){
$(".error").animate({'margin-left': '0'});
$(this).find('input').removeClass('error');
$(this).find('select').removeClass('error');
}
var email = $(this).find('input[name="email"]').val();
if(!email){
$(this).find('input[name="email"]').addClass('error');
alert('Email can not be empty');
}
var name = $(this).find('input[name="name"]').val();
if(!name){
$(this).find('input[name="name"]').addClass('error');
alert('Name can not be empty');
}
if($(this).find('.error')){
$(".error").animate({'margin-left': '15px'});
}else{
alert('No error has been detected.');
}
});
});
</script>
<style>
.form-register input.error {
border:1px solid #F5192F;
box-shadow:0 0 4px #F5192F;
}
</style>
<form class="form-register" method="post" action="">
<input name="email" type="text"/>
<input name="name" type="text"/>
<input type="submit"/>
</form>
私は、フィールドが空でない警告が、決してを表示したいです。親切にも私はこの問題を解決するのに役立ちます。ありがとう