如何驗證在jquery的動態文本框的值

感謝advance.I有具有動態文本框fields.These文本框將根據從第一form.The顯示動態文本框所選擇的組合框值的多個彈出窗口來自jquery。請任何人都幫助我如何驗證點擊提交按鈕上的動態文本框。其實我必須在發送郵件之前驗證文本框。我寫了一個只驗證靜態文本框的代碼。我的代碼如下如何驗證在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>

來源

2017-01-17 Ragith Thomas

我不認爲任何驗證都發生在所有，無論是元素是靜態還是動態。

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

不會綁定到任何東西，因爲有與類「myformid」沒有元素。「。」在選擇器開始時指示一個類。

但是，您確實有一個元素id「myformid」。如果你改變你的選擇器。爲了表示一個id，那麼它將把事件綁定到表單上。但是，「點擊」不是綁定到<form>元素的正確事件。要處理表單的「提交」事件：

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

最後，因爲它的立場，你的表格會做常規（非Ajax）回傳以及運行的功能，因爲默認行爲提交事件不被壓制。添加此行作爲上述功能的第一行：

event.preventDefault();

這將停止定期發送並允許您的驗證功能執行。在這一點上，你應該有一個工作解決方案，假設驗證代碼中的邏輯是你想要的。

來源

2017-01-17 11:16:21 ADyson

如果您的驗證是正確的，你只需要在方法（jQuery的）從

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

附加事件dinamicly創建的元素也將被支持

$(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+

例如

到

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

從

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

到

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

小編建議：儘量避免使用$（「身體」）選擇，你可以看到什麼是你不錯的DOM元素女巫是父母動態生成的抗衡/元素。

來源

2017-01-17 11:24:39 sulest

如何驗證在jquery的動態文本框的值

回答

相關問題