2016-03-29 3 views
0

私はwheather電子メールが有効かどうかを確認しようとしていますが、jQueryを使用していません。とlastIndexOfの値が表示されますが、ラギスターのボタン画面をクリックすると非常に高速になります。アラートを見ることができません..電子メールを有効にするかどうかを確認したいのですが... jQuery

<script src="jquery-2.2.1.min.js"></script> 
<script> 
    $(document).ready(function() { 
    $(".sbt_button").click(function() { 
     var error_arr = []; 
     var email_value = $("#email").val(); 
     alert(email_value); 
     var position_of_at = email_value.value.indexOf('@'); 
     alert(position_of_at); 
     var position_of_dot = email_value.value.lastIndexOf('.'); 
     alert(position_of_dot); 


     if ($("#fname").val() == null || $("#fname").val() == "") { 
     var err = "First Name"; 
     error_arr.push(err); 
     } 
     if ($("#lname").val() == null || $("#lname").val() == "") { 
     var err = "Last Name "; 
     error_arr.push(err); 
     } 
     if (position_of_at == -1 || position_of_dot == -1 || (position_of_at + 2) >= position_of_dot) { 
     var err = "Email "; 
     error_arr.push(err); 
     } 

     if ($("#dob").val() == null || $("#dob").val() == "") { 
     var err = "Date of Birth "; 
     error_arr.push(err); 
     } 

     if (!$("input[type='radio']").is(":checked")) { 
     var err = "Gender "; 
     error_arr.push(err); 
     } 

     if (!$("input[type='checkbox']").is(":checked")) { 
     var err = "Hobbies "; 
     error_arr.push(err); 
     } 


     alert(error_arr); 

    }); 
    }); 
</script> 
</head> 

<body> 
    <form class="form" name="myForm" action="" method="get"> 
    <table> 
     <tr> 
     <p class="heading">Ragistration Form</p> 
     </tr> 
     <tr> 
     <td class="field_Name">First Name :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="text" name="fname" id="fname" class="inputfield_Name" /> 
     </td> 
     </tr> 
     <tr> 
     <td class="field_Name">Last Name :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="text" name="lname" id="lname" class="inputfield_Name" /> 
     </td> 
     </tr> 
     <tr> 
     <td class="field_Name">Email :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="text" name="email" id="email" class="inputfield_Name" /> 
     </td> 
     </tr> 
     <tr> 
     <td class="field_Name">Date of Birth :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="date" name="dob" id="dob" class="inputfield_Name" /> 
     </td> 
     </tr> 
     <tr> 
     <td class="field_Name">Gender :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="radio" name="gender" id="mf" class="inputfield_Name" />Male 
      <input type="radio" name="gender" />Female</td> 
     </tr> 
     <tr> 
     <td class="field_Name">About Yourself :</td> 
     <td> 
      <textarea class="inputfield_Name"></textarea> 
     </td> 
     </tr> 
     <tr> 
     <td class="field_Name">Hobbies :<b style="color:red">*</b> 
     </td> 
     <td> 
      <input type="checkbox" id="hobbies" class="inputfield_Name" />Cricket 
      <input type="checkbox" />Singing 
      <input type="checkbox" />Travling</td> 
     <tr> 
      <td></td> 
      <td> 
      <input type="checkbox" class="inputfield_Name" />Writing 
      <input type="checkbox" />Teaching 
      <input type="checkbox" />Driving 
      </td> 
     </tr> 
     <tr> 
      <td> 
      </td> 
      <td> 
      <input type="submit" value="Ragister" name="sbt_save" class="sbt_button" /> 
      </td> 
      </td> 
     </tr> 
    </table> 
    </form> 
</body> 
</html> 
+0

クリックすると 'return false;'が追加されますか? – theblackgigant

+0

私のために働く? [https://jsfiddle.net/3of51L6a/] – theblackgigant

+0

あなたのjsfiddleでevent.preventDefaultがどこに書かれたのですか? – Shanky

答えて

0

クリック機能の終わりに

if(error_arr.length){ 
    return false; 
} 

を追加します。その背後にあるロジックは、error_arrが空の場合、フォームが有効です。有効でない場合は、条件に入り、フォームは提出されません。

$(document).ready(function(e) 
{   
    $(".sbt_button").click(function(event) 
    {  

     // Rest of your code 
     if(error_arr.length){ 
      event.preventDefault() 
     } 
     alert(error_arr); 

    }); 
}); 
+0

何も変わっていませんでした。 – Shanky

+0

できます'event.preventDefault()'を使って私の更新された答えを確認してください。 –

+0

エラーが発生したときに 'console.log(error_arr.length)'をチェックしてください。あなたが得ている価値は何ですか –

関連する問題