Question

提前谢谢。我有一个弹出窗口，其中有一个动态文本框字段。这些文本框将根据第一个表单中选定的组合框值进行复用。动态文本框从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>

Answer 1

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

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

不会绑定任何内容，因为没有类“myformid”的元素。 “。”在选择器的开头指示一个类。

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

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

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

event.preventDefault();

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

Answer 2

如果您的验证是正确的，您只需要附加事件，以便支持dinamicly创建的元素（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*/});

小建议：尽量避免使用$（＆＃34; body＆＃34;）选择器，你可以看到你的动态生成的竞争/元素的父亲是什么样的dom元素。

如何在jquery中验证动态文本框值

2 个答案: