如何在jQuery中驗證動態文本框值
[英]how to validate dynamic text box values in 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> </td><td>Email:<input type="email" name="emails" class="emails" value="" required="required" /></td><td> </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> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </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>
2 個解決方案
解決方案1
0 2017-01-17 11:16:21
我認為無論元素是靜態的還是動態的，都根本沒有進行任何驗證。
$(".myformid").click(function(){
不會綁定任何東西，因為沒有任何帶有“ myformid” 類的元素。 “。” 選擇器的開頭表示課程。
但是，您確實有一個ID為 “ myformid”的元素。 如果從更改選擇器。 ＃表示ID，然后將事件綁定到表單。 但是，“ click”不是綁定到<form>元素的正確事件。 您要處理表單的“ submit”事件：
$("#myformid").submit(function(event){
最后，就目前情況而言，您的表單將執行常規（非ajax）回發並運行您的函數，因為未取消submit事件的默認行為。 將此行添加為上述函數的第一行：
event.preventDefault();
這將阻止定期回發，並允許您執行驗證功能。 到那時，您應該有一個可行的解決方案，假設您想要的是驗證代碼中的邏輯。
解決方案2
0 2017-01-17 11:24:39
如果您的驗證正確，則只需要附加事件即可支持動態創建的元素（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”）選擇器，您可以看到什么是動態生成的內容/元素的父元素。
如何在Jquery中驗證文本框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.