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

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

javascript jquery html

Javascript jquery验证多个动态添加的字段,javascript,jquery,html,Javascript,Jquery,Html,我试图在使用jquery提交之前验证表单上多个动态添加的字段，但当一个字段有效时，表单将被提交：。如何在提交之前验证所有字段 <html> <body> <form action="#" method="post"> <div id="fields"></div> <input type="submit" value="Submit" />

我试图在使用jquery提交之前验证表单上多个动态添加的字段，但当一个字段有效时，表单将被提交：。如何在提交之前验证所有字段

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


添加字段

勒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();
});

});

$（函数（）{
$（“#测试”）。单击（函数（）{
var unique_id=new Date（）.getTime（）；
$（“#字段”）。追加（
）；
});
$（“表格”）。提交（功能（事件）{
如果（$（“.myfield”）.val（）！==“”）{
警告（“表格有效”）；
//$（“span”）.text（“已验证…”）。show（）；
返回；
}
//$（“span”）.text（“无效！”）.show（）.fadeOut（1000）；
警告（“表格无效”）；
event.preventDefault（）；
});
});

请检查这把小提琴……这就是你想做的

在这里输入代码

你能试试吗

$( "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();
      }
    });