jQuery - if/else로 자바를 통해 HTML 클래스를 변경하십시오.

Question

완벽하게 작동하는 부트 스트랩 유효성 검사 양식이 있고 error & success의 inputField 색상을 변경했습니다.

문제점은, text-color 및 border-color을 레이블으로 변경하고 싶습니다. 나는 다양한 자바 스크립트 코드를 시도했지만 아무도 자바 스크립트에 익숙하지 않은 나를 위해 작동합니다.

HTML

<form action="" class="form-horizontal form-bordered storyForm" novalidate> 

<div class="form-body"> 
    <div class="form-group" id="form-group"> 
     <div class="controls"> 
      <label class="control-label" id="label" for="email">Email</label> 
      <input type="email" id="email" class="form-control" name="email" required data-validation-required-message="This field is required"> 
     </div> 
    </div> 
    <div class="form-group" id="form-group"> 
     <div class="controls"> 
      <label class="control-label" id="label" for="password">Password</label> 
      <input type="password" id="password" class="form-control" name="password" required data-validation-required-message="This field is required"> 
     </div> 
    </div> 
</div> 

<div class="form-actions"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="offset-sm-3 col-md-9"> 
        <button type="submit" id="submit" class="btn btn-success"> <i class="fa fa-check"></i> Submit</button> 
        <button type="button" class="btn btn-inverse">Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

form.storyForm label{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #000; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid rgba(0,0,0,.15); 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 
form.storyForm label.error{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #ef5350; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid #ef5350; 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 
form.storyForm label.validate{ 
    padding: 0px 25px; 
    /* background-color: rgba(0,0,0,.15); */ 
    color: #26dad2; 
    border-radius: 4px 4px 0px 0px; 
    border: 1px solid #26dad2; 
    border-bottom: 1px solid white !important; 
    top: 1px; 
    position: relative; 
} 

내가 추가 할 노력하고있어 자바 스크립트 코드/클래스를 제거

<script> 
$(document).ready(function() { 
    $("#submit").click(function() { 
     if ($("#form-group").hasClass("error")) { 
      $("#label").addClass("error"); 
     } else if ($("#form-group").hasClass("validate")) { 
      $("#label").removeClass("error"); 
      $("#label").addClass("validate"); 
     } 
    }); 
}); 
</script> 

는 또한 축복하는 class를 확인뿐만 아니라 자바 스크립트에서 작업하는 경우에만 페이지에 일치하는 ID로 FIRST 요소를 반환 나

<script> 
$(document).ready(function() { 
$("#submit").click(function() { 
    if ($(".form-group").hasClass("error")) { 
     $(".control-label").addClass("error"); 
    } else if ($("#form-group").hasClass("validate")) { 
     $(".control-label").removeClass("error"); 
     $(".control-label").addClass("validate"); 
    } 
}); 
}); 
</script> 

Answer 1

ID 선택기 작동하지되었다. 다음은이를 보여주는 간단한 코드입니다. https://codepen.io/anon/pen/bYoqZP

지글 셀렉터는 ID 선택자가 분명하지 않아야합니다 : $('#xxxxxxx'). 요소 선택기가되도록 $('#label')을 변경하거나 $('label')으로 변경하거나 $('.control-label') 클래스를 선택해야합니다. 또한 form-group에 ID 선택기를 사용하고 있으며 해당 ID가있는 첫 번째 요소 만 반환하므로 클릭 핸들러가 2, 3, ... n 번째 양식 그룹에 영향을 미치지 않습니다.

제공된 견본을 사용하면 양식의 유효성을 검사하는 방법이나 처음에 찾은 오류 클래스를 추가하는 방법을 설명하는 것이 없습니다. 이제는 제출 버튼의 기능을 확장하여 및 클래스를 제출하는 기능을 확장하고 있습니다. 문제는 행동 양식이 없으면 양식이 아무 것도 제출하지 않고 사용자가 제출을 클릭하면 아무 것도하지 않는다는 것입니다.

양식 그룹에 error 클래스를 추가하고 제출을 클릭하면 변경된 적용 효과가 표시되지만 양식을 처리하기 위해 더 많은 코드가 필요합니다.

Answer 2

JavaScript 안에 '$'을 사용하고 있습니다. JQuery 라이브러리를 포함해야합니다. '$'은 JQuery의 기본 객체 (또는 함수)입니다. JQuery을 사용하지 않는 경우 .getElementById() 또는 .querySelector()과 같은 JavaScript 메서드를 사용하고 id 값을 매개 변수로 전달해야합니다.

또한 querySelector를 사용하면이 기능을보다 효과적으로 처리 할 수 ​​있습니다.

여기는 MDN getElementById() documentation 및 MDN querySelector() documentation에 대한 링크입니다.

도움이 되었기를 바랍니다. 행운을 빕니다!