如何从输入中删除类

Question

我有一段验证表单的JavaScript代码。如果输入字段为空，我将添加“空”，在输入字段上添加红色背景。

当用户点击字段时，有没有办法删除该类？

我曾尝试过这个，但它没有用。

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

    function register()
    {
    	var errornotice = "This field is required"; 
    	
    	if(document.myForma.userid.value == '')
    	{
    		var id = $("#userid"); 
    		id.addClass("empty");
    		id.val(errornotice); 
    	} 
    	
    	if(document.myForma.fullname.value == '')
    	{
    		var name = $("#fullname"); 
    		name.addClass("empty");
    		name.val(errornotice);
    		 
    	}
    	
    	if($(":input").hasClass("empty"))
    	{
    		return false;
    	}
    	else
    	{
    		errornotice.hide();
    		return true;
    	} 
    	
    	
    	$('input').bind('blur', function(){		
    	  $(this).removeClass('empty');
    	 });  
    }

.empty
    {
    	background:red;
    	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>

Answer 1

function register()
    {
    	var errornotice = "This field is required"; 
    	
    	if(document.myForma.userid.value == '')
    	{
    		var id = $("#userid"); 
    		id.addClass("empty");
    		id.val(errornotice); 
    	} 
    	
    	if(document.myForma.fullname.value == '')
    	{
    		var name = $("#fullname"); 
    		name.addClass("empty");
    		name.val(errornotice);
    		 
    	}
    	
    	if($(":input").hasClass("empty"))
    	{
    		return false;
    	}
    	else
    	{
    		errornotice.hide();
    		return true;
    	} 
    }    	
    	
    $('input[type="text"]').bind('focus', function(){		
    	$(this).removeClass('empty').val('');
    });

.empty
    {
    	background:red;
    	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>

Answer 2

当用户单击此控件时，您可以使用focus（）方法删除该类。这也适用于鼠标和键盘。

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

function register()
    {
    	var errornotice = "This field is required"; 
    	
    	if(document.myForma.userid.value == '')
    	{
    		var id = $("#userid"); 
    		id.addClass("empty");
    		id.val(errornotice); 
    	} 
    	
    	if(document.myForma.fullname.value == '')
    	{
    		var name = $("#fullname"); 
    		name.addClass("empty");
    		name.val(errornotice);
    		 
    	}
    	
    	if($(":input").hasClass("empty"))
    	{
    		return false;
    	}
    	else
    	{
    		errornotice.hide();
    		return true;
    	} 
    }    	
    	
    $('input[type="text"]').focus(function(){		
    	$(this).removeClass('empty').val('');
    });

.empty
    {
    	background:red;
    	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>

Answer 3

使用on blur看起来你在正确的轨道上，但我建议使用焦点，并将文本更改为空字符串。此外，您希望文本的行为方式更像是placeholder，因此您可能需要考虑使用它，但下面的代码并没有使用它。

＆＃13;

＆＃13;

    function register()
    {
    	var errornotice = "This field is required"; 
    	
    	if(document.myForma.userid.value == '')
    	{
    		var id = $("#userid"); 
    		id.addClass("empty");
    		id.val(errornotice); 
    	} 
    	
    	if(document.myForma.fullname.value == '')
    	{
    		var name = $("#fullname"); 
    		name.addClass("empty");
    		name.val(errornotice);
    		 
    	}
    	
    	$('.form-control').bind('focus', function(){	
          $(this).val('');
    	  $(this).removeClass('empty');
    	 });  
    }

＆＃13;

.empty
    {
    	background:red;
    	color:#fff;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;