2016-05-31 53 views
0

我有一段驗證表單的JavaScript代碼。如果輸入字段爲空,我將添加「空白」,在輸入字段中輸入紅色背景。如何從輸入中刪除類

當用戶點擊該字段時,是否有辦法刪除該類?

我曾試過這個,但它沒有奏效。

$('input').bind('blur', function(){   
     $(this).removeClass('empty'); 
    }); 

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    \t 
 
    \t 
 
    \t $('input').bind('blur', function(){ \t \t 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

+0

爲什麼不使用'$( '輸入')。點擊(....)'? –

+0

1)不要將事件處理程序添加到其他事件處理程序中的元素;移動其他地方的事件處理程序綁定。 2)'bind()'在jQuery中被棄用了很長一段時間。除非你必須使用舊版本的jQuery,否則使用'on()'。 3)模糊是用戶離開場地時發生的事件,而不是當他們進入場地時發生的事件。嘗試'focusin'。 –

+0

您需要在* return之前添加事件處理程序*。返回語句之後的代碼永遠不會執行。 – 4castle

回答

0

看起來你是在正確的軌道上通過使用模糊,但我會建議使用焦點,改變它的文本爲空字符串。此外,它看起來像你希望你的文本行爲的方式更像是placeholder,所以你可能要考慮使用它,但下面的代碼不使用它。

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t $('.form-control').bind('focus', function(){ \t 
 
      $(this).val(''); 
 
    \t $(this).removeClass('empty'); 
 
    \t }); 
 
    }
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

0

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').bind('focus', function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>

0

可以使用焦點()方法去除類時該控制用戶點擊。這也適用於鼠標和鍵盤。

$('input[type="text"]').focus(function(){  
    $(this).removeClass('empty').val(''); 
}); 

function register() 
 
    { 
 
    \t var errornotice = "This field is required"; 
 
    \t 
 
    \t if(document.myForma.userid.value == '') 
 
    \t { 
 
    \t \t var id = $("#userid"); 
 
    \t \t id.addClass("empty"); 
 
    \t \t id.val(errornotice); 
 
    \t } 
 
    \t 
 
    \t if(document.myForma.fullname.value == '') 
 
    \t { 
 
    \t \t var name = $("#fullname"); 
 
    \t \t name.addClass("empty"); 
 
    \t \t name.val(errornotice); 
 
    \t \t 
 
    \t } 
 
    \t 
 
    \t if($(":input").hasClass("empty")) 
 
    \t { 
 
    \t \t return false; 
 
    \t } 
 
    \t else 
 
    \t { 
 
    \t \t errornotice.hide(); 
 
    \t \t return true; 
 
    \t } 
 
    }  \t 
 
    \t 
 
    $('input[type="text"]').focus(function(){ \t \t 
 
    \t $(this).removeClass('empty').val(''); 
 
    });
.empty 
 
    { 
 
    \t background:red; 
 
    \t color:#fff; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma"> 
 
     <div class="form-group"> 
 
     <label for="userN">User Name<span class="error">*</span></label> 
 
     <input type="text" name="userid" class="form-control" id="userid"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="fullname">Full name<span class="error">*</span></label> 
 
     <input type="text" id="fullname" name="fullname" class="form-control"> 
 
     <p id="empty"></p> 
 
     </div> 
 
     <input type="submit" value="submit" id="submit"> 
 
    </form>