jQuery - 양식 유효성 검사

Question

jQuery를 사용하여 양식 유효성 검증 스크립트를 작성하려고합니다.

그러나 작동하지 않는 것 같습니다. 아마도 사소한 것이지만 문제의 원인을 찾을 수 없습니다.

또한 jQuery를 사용하기 시작했는데 좋은 구문 검사기를 찾고 있습니다. 누구든지 추천 할 수 있습니까?

$(document).ready(function() { 
    $('.error').toggle(); 
    }); 


//when the button is clicked 

$(".button").click(function() { 
     // validate and process form 
     // first hide any error messages 
    $('.error').hide(); 

     var name = $("input#name").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("input#email").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("input#subject").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("textarea#message").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 

     $.ajax({ 
     type: "POST", 
     url: "bin/process.php", 
     data: dataString, 
     success: function() { 
     $('#contact_form').html("<div id='message'></div>"); 
     $('#message').html("<h2>Contact Form Submitted!</h2>") 
     .append("<p>We will be in touch soon.</p>") 
     .hide() 
     .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
     }); 
     } 
    }); 
    return false; 
    }); 
}); 

Answer 1

당신이 jQuery.validate.min.js 또는 jquery.validate.unobtrusive.min.js을 포함해야합니다 (캔트 내 머리 꼭대기를 기억)과 같이 jQuery를 내부 검증 후 (들) 파일 :

$('.button').click(function() { 
if ($('form').valid()) { 
    //do saving stuff 
} else { 
    //errors on form - let user correct them 
} 

});

구문 검사기에서 어떤 플랫폼을 사용하고 있는지 확인하지는 않지만 Visual Studio 2010을 사용하고 js 파일을 포함하면 VS2010에서 문제점을 강조하는 intellisense를 제공합니다.

Answer 2

<script type="text/javascript"> 
$(document).ready(function() {  
$("#MyForm").validate({ 
      rules: { 

       name: {required: true}, 
       phone:{required: true}, 
       email:{required: true} 

       }, 
       messages: { 

        name: {required: "Please Enter Name"}, 
       phone:{required: "Please Enter Phone No"}, 
       email:{required: "Please Enter Email "} 

       } , 
       submitHandler: function(form) { 
         form.submit(); 
       } 

      }); 
}); 

</script>