JQuery로 버튼을 비활성화하지 않고 양식을 제출하는 것을 중지하는 방법은 무엇입니까?

안녕하세요 유효성을 검사 할 간단한 양식이 있습니다. 클라이언트 측 유효성 검사를 수행하고 싶습니다. 양식에 이름 필드가 하나만 있다고 말하면 이름 길이가 5와 20 사이의 문자인지 확인하고 싶습니다. 그렇다면 문제는 없습니다. 데이터가 서버로 전송 된 다음 서버 측 유효성 검사를 적용하지만 그렇지 않은 경우 입력 필드 옆에 스팬에 오류 메시지가 표시되어 5 - 20 자이어야합니다. 문제는 내가 맞았을 때입니다 제출 버튼은 1 초 미만의 결과를 보여줍니다. 제출 버튼을 다시로드하면 페이지가 다시로드됩니다. 또한 입력 한 데이터가 이미 전송 된 이후로 서버 측 유효성 검사가 포함되어있는 경우 어떻게 처리합니까? 단추를 제출하여 데이터를 서버로 보내고 단추를 비활성화하지 않고 페이지를 다시로드하십시오.JQuery로 버튼을 비활성화하지 않고 양식을 제출하는 것을 중지하는 방법은 무엇입니까?

여기 내 예제 코드

<!doctype html> 
<html> 
<head> 
    <title>form validation</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

    <script> 
     $(document).ready(function() { 
      $("#submit").click(function(){ 
       myfunction(); 
      }); 

      function myfunction() 
      { 
       name = $("#user").val(); 
       nameError = $(".error").first(); 
       myError = ""; 
       if(name.length < 5 || name.length > 20) 
        myError += "length should be between 5 and 20 "; 
       else 
        myError += "ok" 

       nameError.html(myError); 

      } 
     }); 
    </script> 

    <style> 
     .error 
     { 
      color : red; 
      text-transform: capitalize; 
      margin-left: 20px; 
     } 
    </style> 
</head> 
<body> 

    <form method="post" action=""> 
     NAME : <input type="text" name="user" id="user"><span class="error"></span><br /> 
     <input type="submit" value="Submit" id="submit"> 
    </form> 

</body> 
</html>

출처

2016-05-31 Mohammad Istanboli

참을 리턴/"myFunction이"에서 허위 –

문제는 당신이 문제를 찾는 양식 제출을 취소하지 않을입니다.

이렇게하려면 버튼의 클릭 이벤트가 아닌 양식의 제출 이벤트를 수신 대기해야합니다.

시도 :

 $("form").on('submit', myfunction); //<-- listen for form submit, not button click 

     function myfunction(evt) { //<-- the event object is automatically passed along; 
            // this is key for suppressing submission 
      name = $("#user").val(); 
      nameError = $(".error").first(); 
      myError = ""; 
      if(name.length < 5 || name.length > 20) 
       myError += "length should be between 5 and 20 "; 
      else 
       myError += "ok" 

      if (myError) { 
       evt.preventDefault(); //<-- suppress submission if error found 
       nameError.html(myError); 
      } 

     }

당신은 양자 택일 HTML5 validation을 사용하고 당신의 인생을 좀 더 쉽게 만들 수 있습니다.

출처

2016-05-31 11:33:52 Utkanos

감사합니다. evt.preventDefault()가 해당 데이터가 서버로 전송되는 것을 막을 수 있도록 도와 주셔서 감사합니다. –

예를 들어 서버 측 유효성 검사로 이것을 가지고 있는데 내 양식에서 두 번 확인하면 PHP 검사가 실행되지 않습니다 –

오류가있는 경우에만 데이터 제출이 서버로 전송되는 것을 방지합니다 (예 : 양식 제출). 그렇지 않은 경우 양식이 제출됩니다. – Utkanos

$("#submit").click(function(){ 
    if ($('#user').text.length > 4){ 
      myfunction(); 
    }else{ 
    // show error message 
    } 
});

하지 기능에 클릭에서 확인 할이 시도

출처

2016-05-31 11:35:40 Adrian

이것은 양식 제출을 취소하지 않을 것이다. – Utkanos

ok .. add (e)를 함수 매개 변수로 사용하고 else에 배치 - e.preventDefault() – Adrian

Try this one.. 



<!doctype html> 
    <html> 
    <head> 
     <title>form validation</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 


       function myfunction() 
       { 
        name = $("#user").val(); 
        nameError = $(".error").first(); 
        myError = ""; 
        if(name.length < 5 || name.length > 20){ 
         myError += "length should be between 5 and 20 "; 
         return false; 
        } 
        else{ 
         myError += "ok" 

        nameError.html(myError); 
        return true; 
        } 

       } 
      }); 
     </script> 

     <style> 
      .error 
      { 
       color : red; 
       text-transform: capitalize; 
       margin-left: 20px; 
      } 
     </style> 
    </head> 
    <body> 

     <form method="post" action="" onSubmit="return myFunction();"> 
      NAME : <input type="text" name="user" id="user"><span class="error"></span><br /> 
      <input type="submit" value="Submit" id="submit"> 
     </form> 

    </body> 
    </html>

출처

2016-05-31 11:37:46

그냥 내 code.There 자바 스크립트 또는 jQuery.Code 인의 필요가없는 매우 easy.Follow 한 가지 .IT가 할 내 Pc.Hope에서 테스트 한 것을 즐길 수 있습니다.

<form method="post" action="" > 
    NAME : <input type="text" name="user" pattern="[A-Z a-z.]{5,20}" title="Enter your name between 5 and 20 charecters" required="required" accesskey="U"/><br /> 
    <input type="submit" value="Submit" id="submit">

출처

2016-05-31 11:49:03

JQuery로 버튼을 비활성화하지 않고 양식을 제출하는 것을 중지하는 방법은 무엇입니까?

답변

관련 문제