Question

我尝试在使用jquery提交之前验证表单上的多个动态添加字段，但是当一个字段有效时，表单正在提交：http://jsfiddle.net/cvL0ymu7/。如何在提交之前验证所有字段。

<html>
    <body>
        <form action="#" method="post">
            <div id="fields"></div>
            <input type="submit" value="Submit" />
        </form>
        <button id="test">Add field</button>
    </body>
</html>

Le JavaScript

$(function() {
        $("#test").click(function(){
            var unique_id = new Date().getTime(); 
            $("#fields").append("<input class='myfield' type='text' name='myfield_" + unique_id + "'/><br />");
        });

      $( "form" ).submit(function( event ) {

      if ( $( ".myfield" ).val() !== "" ) {
        alert("form is valid");
        //$( "span" ).text( "Validated..." ).show();
        return;
      }

      //$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
      alert("form is invalid");
      event.preventDefault();
});

});

Answer 1

请检查这个小提琴....这就是你想要做的......

enter code here http://jsfiddle.net/cvL0ymu7/

Answer 2

你能试试MY CODE HERE

吗？

$( "form" ).submit(function( event ) {
      var vaild = true;
      $('.myfield').each(function(){
          if ($(this).val().trim() == '') {                 
              vaild = false;
              return;
          };
      });
      if (valid) {
          alert("form is valid");
      } else {
          alert("form is invalid");
          event.preventDefault();
      }
    });

jquery验证多个动态添加的字段

2 个答案: