양식 검증 - Safari - .validate()

Question

아직 앱을 작성하는 방법을 모르기 때문에 모바일 버전의 웹 사이트를 작성하려고합니다. 사물을 빈 값으로 사출 해보기 전까지는 상황이 좋아졌습니다.

분명히 사파리는 "필수"플래그를 인식하지 못하기 때문에이 모든 기능을 사용하여 작동하도록해야합니다. 그럼 내 발이 계속 농구를 따라 잡는다.

저는 jquery를 사용해야하고 .validate()를 사용해야한다고 가정합니다. 그러나 나 자신의 삶에 대해 나는 그것을 이해할 수 없다.

나의 양식은 간단하다 : (I이 작동하지 만드는 형태의 외부 단지의 경우 그 무언가를 양식 코드의 전체 섹션을 붙여 해요 :

크롬 모바일에

$output .= '<div class="hidden_div" id="mobile_zip">'; 
$output .= '<center> 
     <form id="shop_mobile" method="post" action="choose_location.php"> 
     <input placeholder="Delivery Zipcode" name="po_zip" type="text" required /> 
     <input type="hidden" name="ismobile" value="yes" /> 
     <br /> 
     <input type="submit" value="Start Order" /> 
     </form> 
     </center>'; 
$output .= '</div>'; 

, IE의 일반 , Firefox .. 모든 브라우저를 테스트하지는 않았지만 모든 브라우저에서 위의 코드가 작동하는지 테스트했습니다. 우편 번호를 입력하지 않고 제출을 클릭하십시오. 그러나 Safari는 실패하고 대부분의 사용자는 큰 문제가 있습니다. 내 가장 큰 문제는 오해를 불러 일으킬 가능성이 높습니다.이 코드를 .js 파일에 넣으면 모두 함께 작동하지 않습니다 (또는 내가 없거나 또는 무엇이든간에).

$("#shop_mobile").validate({rules:{"po_zip":{required: true}}, messages:{"po_zip":{required: "Please enter your name"}}}); 

내 코드가 주석 처리 될 때 내 .js 코드가 작동합니다. 코드가 주석 처리되면 내 .js 파일은 100 % 실패합니다. 그래서 내가 두 가지 중 하나를 믿게됩니다 : 1) 코드를 사용하여 여러 사이트를 보았지만 그 코드를 사용하는 방법을 이해하지 못합니다. 그리고 그 사용법 또는 2) 구문을 파악할 수 없습니다. 오류 (hehe 이전에 발생했습니다)

내 첫 번째 질문은 .validate 권한을 사용하고 있으며 Safari에서 HTML5 "필수"속성을 인식하지 못하는 문제에 도움이 될 것입니다. 그리고 첫 번째 질문은 내 해결책이 아니라고 가정하는 두 번째 질문은 사람들이 모바일 사파리에서 공백을 허용하지 않는 양식을 만드는 방법입니다. 지금 나는 페이팔 (heh)이 아니라는 것을 알고있다. 그러나 내가 모바일 사파리에서 그들의 사이트에서 복종했을 때 그것은 나를 보내지 않는다! 이베이, 똑같은. 그래서 분명히 이것 주위에 방법이 있습니다.

나는 또한 "novalidate"모든 양식을 만든 다음 어떻게 든 확인하고 그렇지 않으면 실패하지만, 내가 필요로하는 "datepicker"를 깨뜨린 것과 다른 해결책을 시도했다.

나는 솔루션이 .validate()와 관련이 있다고 희망하며, 내가 읽은 바를 근거로 잘못 사용하고있다. 아마도 그럴듯한 옵션이 있지만 나는 단지 3 시간 동안 연구하고 아무것도하지 않았다. 내 사정서를 통해 사파리가 빈 입력란을 게시하는 것을 막을 수 있습니다.

나는 휴대 전화에서도 유효성을 검사해야하는 필드가 훨씬 더 큽니다. 그렇지만 하나의 필드 형식을 사용하지 않아도 내게 datepicker를 손상시키지 않고 과거 기록을 볼 수는 없습니다. 더 큰 형태!

어쩌면 나는 어둠 속에 있어도 어쩌면 사파리가 HTML5 속성을 무시한다는 것을 정말로 믿을 수 없습니다. 나는 아직도 충격에 빠졌다고 생각한다. 심지어 데스크톱 버전도 실패합니다. UNREAL. 항상 IE가 일을하는 나의 투쟁이라고 생각했습니다.

편집 :이 그것을 빈 양식의 제출을 ​​중지하기 위해 노력하고, 내가 노력 다른 코드이지만 "날짜 선택기"(달력은 결코 튀어 올라을)를 jQuery를 나누기

var form = document.getElementById('formID'); // form has to have ID: <form id="formID"> 
form.noValidate = true; 
form.addEventListener('submit', function(event) { // listen for form submitting 
    if (!event.target.checkValidity()) { 
     event.preventDefault(); // dismiss the default functionality 
     alert('Please, fill the form'); // error message 
    } 
}, false); 

내가 가진

이 여기에서 :

Required Attribute Not work in Safari Browser

Answer 1

나는 어떤 "트릭".validate 또는 .h5validate 같은 일을 가져올 수 없습니다. 나는 그것들을 사용하는 방법을 얻지 못하는 것 같습니다. 그래도 난 일하러 가야 했는가

이 있었다 :

$("#shop_mobile").on("submit", function(e) { 
    alert("Inside"); 
    zipinput = $("#po_zip").val(); 
    alert(zipinput); 
    if (zipinput.match(/(^\d{5}$)/)) { 
     document.getElementById("po_zip").className = document.getElementById ("po_zip").className.replace(/(?:^|\s)ErrorRedBorder(?!\S)/g , '') 
     alert("MATCHED!"); 

    } else { 
     document.getElementById("po_zip").className = "ErrorRedBorder"; 
     alert("NO MATCH!"); 
    } 
    e.preventDefault(); 
}); 

간단하지가 브라우저로 여기서 모든 플랫폼에서 작동하는 자바 스크립트로하지만, 어쨌든 그 아마 더 나은 솔루션을 작동하고 정직해야한다으로 "필수"와 같은 속임수는하지 마십시오. 난 단지 내 모든 양식을 제대로 돌볼 자바 스크립트를 많이 할 필요가 :)

Answer 2

나는이 jQuery 스크립트는 코드의 도움으로 작동합니다. "e.preventDefault()"

이 스크립트를 사용해보십시오. 좋은 점은 입력에 정의한 패턴을 사용한다는 것입니다.

$('input[name="submit"]').click(function(e) { 
$(':input').each(function(input) { 
    if($(this).attr('required')) { 
     var required = $(this); 
     if(required.attr('pattern')) { 
      required.css('background-color','inherit'); 
      var patt = new RegExp(required.attr('pattern'),"i"); 
      if(!patt.test(required.val())) { 
       required.css('background-color','#f2dede'); 
       e.preventDefault(); 
       window.scroll(0,144); 
      } 
     } 
     else { 
      if(required.val() == '' || required.val() == null) { 
       required.css('background-color','#f2dede'); 
       e.preventDefault(); 
       window.scroll(0,144); 
      } 
     } 
    } 
});});