JQueryでボタンを無効にせずにフォームを送信しないようにするにはどうすればいいですか？

こんにちは私は検証するための単純なフォームを持っています。私はクライアント側の検証をしたいと思います。フォームには名前のフィールドが1つしかありません。名前の長さが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（）がそのデータをサーバーに正しく送信できないように助けていただきありがとうございます。 –

私はこれをサーバ側のバリデーションとして持っています。フォームに2つのOKがあると、このPHPの検証は実行されません。 <？php if（$ _ SERVER ['REQUEST_METHOD'] == 'POST'） { $ name = $ _POST ['user']; if（！preg_match（ "/^[a-zA-Z] * $ /"、$ name）） echo "名前には文字のみを含める必要があります"; else echo "フォームを送信していただきありがとうございます"; } ？> –

エラーが発生した場合のみ、データがサーバーに送信されないようにします（フォーム提出）。そうでない場合は、フォームが提出されます。 – 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

ない機能でクリックに検証するだけ.ITは私code.ThereはjavascriptやjQuery.Codeの必要はありません非常にeasy.Followされている一つのことを行うのですか、これを試してみてください私の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でボタンを無効にせずにフォームを送信しないようにするにはどうすればいいですか？

答えて

関連する問題