如何验证jquery中的动态文本框值答案

【问题标题】：how to validate dynamic text box values in jquery如何验证jquery中的动态文本框值
【发布时间】：2017-06-01 09:11:05
【问题描述】：

提前致谢。我有一个弹出窗口，其中有一个动态文本框字段。这些文本框将根据第一个表单中选择的组合框值进行组合。动态文本框从 jquery 显示。请任何人帮助我如何在单击提交按钮时验证动态文本框。实际上我必须在发送邮件之前验证文本框。我编写了一个仅验证静态文本框的代码。我的代码如下

<head>
<script>
  $(document).ready(function () { 
        $(".myformid").click(function(){
        var nameVal = $('.names').val();
        var emailVal = $('.emails').val();
        var phoneVal = $('.phones').val();       
        if(nameVal == "")   
        {
           $('#errmsg').html("<p style='color:red;font-weight:bold'>Please enter the Name</p>");      
        }   
        else if(emailVal == ""){
          //alert("A textbox is required"); 
          $('#errmsg').html("<p style='color:red;font-weight:bold'>Please enter the email Id</p>"); 
        }
        else if(!ValidateEmail(emailVal))
        {
           $('#errmsg').html("<p style='color:red;font-weight:bold'>Invalid Email Id</p>");  

        }
        else if(phoneVal == "")   
        {
           $('#errmsg').html("<p style='color:red;font-weight:bold'>Please enter the Phone Number</p>");

        }
        else if(isNaN(phoneVal))
        {
           $('#errmsg').html("<p style='color:red;font-weight:bold'>Please enter the Valid Phone Number</p>");

        }
        else if(emailVal !="" && phoneVal != "")    
        {
           $('#errmsg').text(" ");

           var username = $('#usernameId').val();
    var length = $('#lengthId').val();    
    var nameArray = [];     
    var emailArray = [];
    var phoneArray = [];
    $('.names').each(function(){
       nameArray.push(this.value);         

    });    
    var nameboxVal = nameArray.join(",");           

    //alert(nameboxVal);     

    $('.emails').each(function(){
       emailArray.push(this.value);

    });
    var emailboxVal = emailArray.join(",");
    //alert(emailboxVal);  

    $('.phones').each(function(){
       phoneArray.push(this.value);   

    });
    var phoneboxVal = phoneArray.join(",");          

    //alert(phoneboxVal);

      $.ajax({

          type: "POST",
          url: "/invl_exams/popSubmit",   
          data: {user:username,name:nameboxVal,email:emailboxVal,phone:phoneboxVal,lengths:length},              
          success: function(result){  

            console.log(result);

            $('#mailSuccess').text('Mail Send Successfully');         
            $('#mailSuccess').fadeOut(5000);
          }

        });


        }

       });

      });

// Passing dynamic textboxes inside the dialog box
    $(".create-user").change(function(){      

        var selVal = $(this).val();         
        $('#lengthId').val(selVal);    
        $("#textboxDiv").html('');    


        if(selVal > 0) {

            for(var i = 1; i<= selVal; i++) {   

              var sno = i;               


               $("#textboxDiv").append('<tr><td>'+sno+'. </td><td>Name:<input type="text" name="names" class="names" value="" required="required" /></td><td>&nbsp;</td><td>Email:<input type="email" name="emails" class="emails" value="" required="required" /></td><td>&nbsp;</td><td>Phone:<input type="text" name="phones" class="phones" value="" required="required" minlength="10" maxlength="16"/><br/></td></tr>');         

            }                            

          }


    });  

  });


</script>
</head>
<body>
  <div id="dialog" title="Enter details to send Mail">   
     <!--<form id="myformid" method="post" action="<?php //echo $this->webroot?>users/sendmail">-->
      <div id="mailSuccess" style="color:#019002;font-weight:bold"></div> 
      <form id="myformid" method="post">     
      <table id="examtable">   
        <tr>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
         <td>&nbsp;</td>
        </tr>        
        <tr> 
          <div id="textboxDiv"></div>  
          <input type="hidden" name="username" id="usernameId" value="<?php echo $this->Session->read('Auth.User.username'); ?>">
          <input type="hidden" name="length" id="lengthId" value="">                                    
        </tr>
      <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>        
         <!--<input type="submit" name="btnSubmit" value="Submit">-->
        <input type="button" name="btnSubmit" value="Send Mail" id="popSubmit">                           
       </td>        
      </tr>
      </table>
      </form>
    </div>
   </div>
</body>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我认为根本不会发生任何验证，无论元素是静态的还是动态的。

$(".myformid").click(function(){

不会绑定到任何东西，因为没有 class "myformid" 的元素。这 ”。”在选择器的开头表示一个类。

但是，您确实有一个带有 id “myformid”的元素。如果您将选择器从 .到 # 表示一个id，然后它将事件绑定到表单。但是，“click”不是绑定到<form> 元素的正确事件。你想处理表单的“提交”事件：

$("#myformid").submit(function(event){

最后，就目前而言，您的表单将执行常规（非 ajax）回发以及运行您的函数，因为提交事件的默认行为不会被抑制。添加这一行作为上述函数的第一行：

event.preventDefault();

这将阻止定期回发并允许执行您的验证功能。此时您应该有一个可行的解决方案，假设您的验证代码中的逻辑是您想要的。

【讨论】：

【解决方案2】：

如果你的验证是正确的，你只需要附加事件以支持动态创建的元素（jQuery on）

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

例如

来自

$(".myformid").click(function(){/*Some action*/});

到

$("body").on('click', ".myformid", function(){/*Some action*/});

来自

$(".create-user").change(function(){/*Some action*/});

到

$("body").on('change', ".create-user", function(){/*Some action*/});

小建议：尽量避免使用 $("body") 选择器，您可以看到什么是您的好 dom 元素，女巫是您动态生成的竞争/元素的父级。

【讨论】：