왜 내 <form> 속성이 "novalidate"입니까?

Question

내 <form>이 속성 novalidate을 얻고 있으며 이로 인해 jQuery.Validate에 의해 유효성이 검증되지 않습니다. 1.9 및 1.11 버전을 사용하고 있으며이 오류를 생성합니다. 내가 HTM5 유효성 검사를 사용하지 않는

...

내 페이지 코드 :

SCRIPT :

<!-- JQUERY VALIDATION --> 
    <script src="js/jquery.validate.js"></script> 

    <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#enviando").hide(); 
       $("#form").validate({ 
        rules: { 
         nome: { required: true, minlength: 2 }, 
         empresa: { required: true }, 
         email: { required: true, email: true },    
         telefone: { required: true }, 
         assunto: { required: true }, 
         mensagem: { required: true } 
        }, 
        messages: { 
         nome: { required: 'Preencha o campo nome', minlength: 'No mínimo 2 letras' }, 
         empresa: { required: 'Preencha o campo Empresa' }, 
         email: { required: 'Informe o seu Email', email: 'Informe um Email válido' },    
         telefone: { required: 'Informe seu Telefone' }, 
         assunto: { required: 'Preencha o campo com o Assunto' }, 
         mensagem: { required: 'Escreva sua Mensagem' } 

        }, 
        submitHandler: function(form){ 
         $("#form").hide(); 
         $("#enviando").show();    
         var dados = $(form).serialize(); 
         $.ajax({ 
          type: "POST", 
          url: "envia_contato.asp", 
          data: dados, 
          success: function(data) 
          { 
           alert("teste"); 

          } 
         }); 

         return false; 
        }   
       }); 

       $("#form").removeAttr("novalidate"); 

      //Input and Textarea Click-Clear 
      $('input[type=text]').focus(function() { 
       if($(this).attr('readonly') || $(this).attr('readonly') == 'readonly') return false; 
       if ($(this).val() === $(this).attr('title')) { 
         $(this).val(''); 
       } 
       }).blur(function() { 
       if($(this).attr('readonly') || $(this).attr('readonly') == 'readonly') return false; 
       if ($(this).val().length === 0) { 
        $(this).val($(this).attr('title')); 
       }       
      }); 
      $('textarea').focus(function() { 
       if ($(this).text() === $(this).attr('title')) { 
         $(this).text(''); 
        }   
       }).blur(function() { 
       if ($(this).text().length === 0) { 
        $(this).text($(this).attr('title')); 
       }       
      }); 



      }); 

     </script> 

FORM의 마크 업 :

<div class="form_faleconosco"> 
       <div id="enviando"><br/><img src="imagens/ajax-loader.gif"><br/><span>ENVIANDO FORMULÁRIO</span></div> 

       <form action="" id="form" class="feedback_form" method="post"> 
        <label class="label-name"></label> 
        <input class="field-name form_field" type="text" title="Name" value="Name" name="nome" style="width: 400px;"/> 
        <div class="clear"></div> 
        <label class="label-empresa"></label> 
        <input class="field-empresa form_field" type="text" title="Empresa" value="Empresa" name="empresa" style="width: 400px;"/> 
        <div class="clear"></div> 
        <label class="label-email"></label> 
        <input class="field-email form_field" type="text" title="Email" value="Email" name="email" style="width: 400px;"/> 
        <div class="clear"></div> 
        <label class="label-phone"></label> 
        <input class="field-phone form_field" type="text" title="Telefone" value="Telefone" name="telefone" style="width: 400px;"/> 
        <div class="clear"></div> 
        <label class="label-subject"></label> 
        <input class="field-subject form_field" type="text" title="Assunto" value="Assunto" name="assunto" style="width: 400px;"/> 
        <div class="clear"></div> 
        <label class="label-message"></label> 
        <textarea class="field-message form_field" title="Mensagem" rows="5" cols="45" name="mensagem" style="width: 400px;">Mensagem</textarea> 
        <div class="clear"></div> 
        <input id="submit2" class="feedback_go" type="button" value="Enviar Mensagem" name="submit"/> 
       </form> 

      </div> 

라이브 버전 : http://www.alsite.com.br/prime/faleconosco.html

Answer 1

그래, 내가 당신의 페이지로 조금 놀았는데 나는 진정한 문제가 어디에 있는지 알 것 같아. . 필드의 기본값을 설정하고 jQuery 유효성 검사는 값을 값으로 처리합니다 (다른 값을 알 수있는 방법이 없습니다). 이것이 가끔 작동하는 이유입니다. (표준이 아닌 방식으로 초점을 전환하면서 확인 메시지를 표시 할 수있었습니다.)

내가 지정 유효성 검사 방법을 추가하여이 주위에 방법을 제안

:

$(document).ready(function(){ 
    ... 
    $.validator.addMethod("defaultTitle", function(value, element) { 
     return !($(element).val() === $(element).attr('title')); 
    }, $.validator.messages.required); 

    $("#form").validate({ 
     rules: { 
      nome: { required: true, defaultTitle: true, minlength: 2 }, 
      ... 
     }, 
     messages: { 
      nome: { required: 'Preencha o campo nome', defaultTitle: 'Preencha o campo nome', minlength: 'No mínimo 2 letras' }, 
      ... 
     }, 
     submitHandler: function(form){ 
      ... 
     }   
    }); 
    ... 
}); 

당신은 기본값을 설정하고있는 분야에 새로운 defaultTitle 규칙을 적용해야한다 (당신은 제거 할 필요는 없습니다 novalidate 속성). JQuery와 유효성 검사 플러그인가 발생하지 않는 이유

또 다른 이유는 submit 대신 button를 사용하고 있다는 것입니다 :

<input type="button" /> 버튼이 양식을 제출하지 않을 것이다 - 그들은 기본적으로 아무것도하지 않습니다. 일반적으로 AJAX 애플리케이션의 일부로 JavaScript와 함께 사용됩니다.

버튼은 JavaScript로 별도 지정하지 않는 한 사용자가 클릭 할 때의 양식을 제출합니다.

jQuery를 검증 이벤트를 제출 기준에 접선, 당신은 다음과 같은 마크 업을 변경해야합니다 :

이

<div class="form_faleconosco"> 
    ... 
    <form action="" id="form" class="feedback_form" method="post"> 
     ... 
     <input id="submit2" class="feedback_go" type="submit" value="Enviar Mensagem" name="submit"/> 
    </form> 
</div>