데이터 유효성 검사 오류가 작동하지 않는 경우 제출 단추를 비활성화하십시오.

양식에서 일부 입력 필드의 유효성을 검사하기 위해 Jquery 양식 유효성 검사기를 사용하고 있는데, 사용자가 모든 입력란에 대한 유효성을 검사하지 않으면 제출해야합니다. 버튼을 사용자가 클릭 할 수 없어야합니다. (사용 중지되어야 함)데이터 유효성 검사 오류가 작동하지 않는 경우 제출 단추를 비활성화하십시오.

여기에서 유효성 검사를 받았습니다. http://www.formvalidator.net/index.html#advanced_toggleDisabled

여기에 코드가 있지만 제출 버튼을 클릭 할 수 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
</head> 

<body> 
<form action="#" method="POST"> 
    <p> 
    User name (4 characters minimum, only alphanumeric characters): 
    <input data-validation="length alphanumeric" data-validation-length="min4"> 
    </p> 
    <p> 
    Year (yyyy-mm-dd): 
    <input data-validation="date" data-validation-format="yyyy-mm-dd"> 
    </p> 
    <p> 
    Website: 
    <input data-validation="url"> 
    </p> 
    <p> 
    <button type="submit" value="Login">BIG BUTTOn</button> 
    </p> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
<script> 
    $.validate({ 
    lang: 'en' 
    }); 

    $.validate({ 
    modules : 'toggleDisabled', 
    disabledFormFilter : 'form.toggle-disabled', 
    showErrorDialogs : false 
}); 
</script> 

</body> 

</html>

출처

2016-09-15 Aurora

우선 양식에 '타겟팅 해제'클래스가 없습니다.

<form action="#" method="POST" class="toggle-disabled"> 

Then you need to disabled the button initially. The plugin will later enable it. 

    <button type="submit" value="Login" disabled="disabled">BIG BUTTOn</button> 

Working code: 

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title of the document</title> 
    </head> 

    <body> 
     <form action="#" method="POST" class="toggle-disabled"> 
      <p> 
       User name (4 characters minimum, only alphanumeric characters): 
       <input data-validation="length alphanumeric" data-validation-length="min4"> 
      </p> 
      <p> 
       Year (yyyy-mm-dd): 
       <input data-validation="date" data-validation-format="yyyy-mm-dd"> 
      </p> 
      <p> 
       Website: 
       <input data-validation="url"> 
      </p> 
      <p> 
       <button type="submit" value="Login" disabled>BIG BUTTOn</button> 
      </p> 
     </form> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
     <script> 
      $.validate({ 
       lang: 'en' 
      }); 

      $.validate({ 
       modules: 'toggleDisabled', 
       disabledFormFilter: 'form.toggle-disabled', 
       showErrorDialogs: true 
      }); 
     </script> 

    </body> 

</html>

출처

2016-09-15 07:00:43 Ish

것은 지금 시도 : D – Aurora

를 나는 작업을 시도 – Aurora

..이 시도하지만, 버튼은 항상 현재 사용되지 않습니다. 작업 코드를 붙여 넣었습니다. 검사 – Ish

데이터 유효성 검사 오류가 작동하지 않는 경우 제출 단추를 비활성화하십시오.

답변

관련 문제