클래스를 입력에서 제거하는 방법

양식을 검증하는 JavaScript 코드가 있습니다. 입력 필드가 비어 있으면 입력 필드에 빨간색 배경을 넣는 "빈"을 추가합니다.클래스를 입력에서 제거하는 방법

사용자가 필드를 클릭 할 때 해당 클래스를 제거 할 수있는 방법이 있습니까?

나는 이것을 시도했지만 작동하지 않았다.

2016-05-31 Pedro

왜 사용하지 않는'$ ('입력'). '(...)를 클릭? –

1) 다른 이벤트 처리기 내의 요소에 이벤트 처리기를 추가하지 마십시오. 이벤트 처리기 바인딩을 다른 곳으로 이동합니다. 2)'bind()'는 jQuery에서 오랫동안 사용되지 않았습니다. 이전 버전의 jQuery를 사용하지 않는 한'on()'을 사용하십시오. 3) 흐림은 사용자가 필드를 떠날 때 발생하는 이벤트입니다. 필드에 들어갈 때가 아닙니다. 'focusin'을 시도하십시오. –

'return' 전에 * 이벤트 처리기를 추가해야합니다. return 문 다음의 코드는 절대로 실행되지 않습니다. – 4castle

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>

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

, 그러나 나는 초점에 사용하고 또한 빈 문자열로 텍스트를 변경 추천 할 것입니다. 또한 텍스트가 동작하는 것처럼 보이는 방식은 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>

출처

2016-05-31 23:46:13

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>

출처

2016-05-31 22:48:33

당신은 클래스를 제거하기 위해 초점() 메소드를 사용할 수 있습니다

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>

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

때이 컨트롤에 사용자가 클릭. 이 기능은 마우스와 키보드에서도 작동합니다. 당신이 흐림을에 사용하여 궤도에 있었다처럼 보이는

출처

2016-05-31 23:00:55 santon

클래스를 입력에서 제거하는 방법

답변

관련 문제