jQuery 验证正在复制 else 语句 |验证完成后，不会打印值
jQuery validation is duplicating else statements | Values won't print once validation is finished
所以我正在验证一个表单 - 验证工作正常，但如果用户出错，它会.after <p></p>错误消息。但是，如果用户多次单击button，它将继续打印出.after错误消息！
我已经尝试了所有内容 - 这包括在 if 语句中放置一个布尔表达式，一旦打印.after错误消息，它将使该表达式false，因此 if 语句不会再次运行。这对我不起作用。
验证完成后，我也无法打印出要打印的值！？
为了尝试解决此问题，我尝试将验证包装在一个 if 语句中，该语句测试以查看验证是否true，然后在validation之后的 if 语句底部，我使该boolean值变为false，然后我有一个 else 语句，它打印出每个输入的values......这对我不起作用！
j查询：
// JavaScript Document
$(document).ready(function() {
//Submit the form for validation
$('#submit').click(function ()
{
//Get the values from input fields:
$name = $('#txtName').val();
$age = $('#numAge').val();
//Sex:
$sex = $('sex').val();
//Email:
$email = $('#txtEmail').val();
$confirmEmail = $('#txtConfirmEmail').val();
//Checkbox
$("input[name='interest']:checked").each(function() {
$gender += "" + $(this).val() + ", ";
});
//Fish varieties:
$varieties = $('#txtVariety').val();
//Put checkbox values into an Array
var values = $('input:[name="interest[]"]:checked').map(function () {
return this.value;
}).get();
//printDetails is the id to print out to.
for(var i=0; i<values.length;i++){
alert(values[i]);
}
//Start Validation
if($name.length < 5){
$('#txtName').focus();
$('#txtName').val("");
$('#txtName').after("<p id='after1' style='color:red;'><strong>Enter a name greater than 5 letters!</strong></p>");
return false;
}
else{
$('p').remove('#after1');
$name = $('#txtName').val();
}
if($age.length > 105 || $age.length < 1){
$('#numAge').focus();
$('#numAge').val("");
$('#numAge').after("<p id='after2' style='color:red;'><strong>Enter an Age less than 106 and greater than 0!</strong></p>");
return false;
}
else{
$('p').remove('#after2');
}
function isValidEmailAddress($email) {
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+'.[a-zA-Z]{2,4}$/i);
// alert( pattern.test(emailAddress) );
return pattern.test($email);
};
if(!isValidEmailAddress($email)){
$('#txtEmail').focus();
$('#txtEmail').after("<p id='after3' style='color:red;'><strong>Enter a valid email - <span style='color:#0078ab;'>"+ $email +"</span> - Is not valid</strong></p>");
$('#txtEmail').val("");
return false;
}
else{
$('p').remove('#after3');
//Now check if the email is successfully confirmed
if($email != $confirmEmail){
$('#txtConfirmEmail').focus();
$('#txtConfirmEmail').after("<p id='after4' style='color:red;'><strong>Your email - <span style='color:#0078ab;'>"+ $confirmEmail +"</span> - Does not match!</strong></p>");
$('#txtConfirmEmail').val("");
return false;
}
else{
$('p').remove('#after4');
}
}
//Check if there is atleast 1 checkbox checked
if($('input[type=checkbox:checked').length < 1) {
$('#checkboxError').html('<p id="after5" style="color:red;" id="after5">Please check atleast one checkbox</p>');
return false;
}
else{
//This should remove the above error message!
$('p').remove('#after5');
}
//These won't work?
document.getElementById("printDetails").innerHTML = $name + $age + $gender + $sex + $varieties + $email;
$("#printDetails").html("<div>" + $name + $age + $gender + $sex + $varieties + $email + " </div");
}); //END OF ONCLICK
}); //End of document.ready
目录
<div data-role="page" id="page2">
<div data-role="header">
<h1>Register jQuery</h1>
</div>
<div data-role="content">
<!-- Name, Age -->
<div data-role="fieldcontain">
<label for="txtName">Name:</label>
<input type="text" name="txtName" id="txtName" value="" />
</div>
<div data-role="fieldcontain">
<label for="numAge">Age:</label>
<input type="number" name="numAge" id="numAge" value="" />
</div>
<!-- Sex, Default value = Male-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Sex</legend>
<input type="radio" name="sex" id="sex_male" value="" />
<label for="sex_male">Male</label>
<input type="radio" name="sex" id="sex_female" value="" checked='checked' />
<label for="sex_female">Female</label>
</fieldset>
</div>
<!-- Emails -->
<div data-role="fieldcontain">
<label for="txtEmail">e-mail:</label>
<input type="email" name="txtEmail" id="txtEmail" value="" />
</div>
<div data-role="fieldcontain">
<label for="txtConfirmEmail">Confirm e-mail:</label>
<input type="email" name="txtConfirmEmail" id="txtConfirmEmail" value="" />
</div>
<!-- Interest In checkboxes -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>I am interested in the following</legend>
<input type="checkbox" name="interest[]" value='Comet' id="interest_0" class="custom" value="" />
<label for="interest_0">Comet</label>
<input type="checkbox" name="interest[]" value='Common Goldfish' id="interest_1" class="custom" value="" />
<label for="interest_1">Common Goldfish</label>
<input type="checkbox" name="interest[]" id="interest_2" class="custom" value="Black Moor" />
<label for="interest_2">Black Moor</label>
<input type="checkbox" name="interest[]" value='Celestial Eye' id="interest_3" class="custom" value="" />
<label for="interest_3">Celestial Eye</label>
<input type="checkbox" name="interest[]" value='Fantail' id="interest_4" class="custom" value="" />
<label for="interest_4">Fantail</label>
<input type="checkbox" name="interest[]" value='Lionchu' id="interest_5" class="custom" value="" />
<label for="interest_5">Lionchu</label>
<input type="checkbox" name="interest[]" value='Other' id="interest_6" class="custom" value="" />
<label for="interest_6">Other</label>
</fieldset>
</div>
<div data-role="fieldcontain" class='display'>
<label for="txtVariety">Fish Varieties:</label>
<textarea cols="40" rows="8" name="txtVariety" id="txtVariety"></textarea>
</div>
<p id='checkboxError'></p>
<!-- Text Area - Fish Varieties -->
<!-- Drop down select menu - How did u hear about us -->
<div data-role="fieldcontain">
<label for="selectmenu" class="select">How did you hear about us?:</label>
<select name="selectmenu" id="selectmenu">
<option value="Internet">Internet</option>
<option value="Email">Email</option>
<option value="Friend">Friend</option>
<option value="Billboard">Billboard</option>
<option value="Other">Other</option>
</select>
</div>
<!-- Register & Start again buttons -->
<input type="submit" id='submit' value="Register"/>
<input type="submit" id='resetForm' value="Start Again" />
<!-- Print out the details -->
<div id='printDetails'></div>
我有一种感觉，这段代码应该可以工作 - 希望有人看到问题我'，
好的，
所以在经历了你的小提琴之后，我想我让它以最少的代码更改工作。
最主要的是在提交按钮事件开始时设置布尔isValid以true，并在验证测试失败时设置为false。然后仅在表单有效时显示您的输出。
演示
此外，一些jQuery选择器不正确，我认为性别和性别之间存在一些混淆。它们是同一件事，只是不同的词。
仍然有很大的改进空间，但这看起来像是家庭作业，所以我可以告诉你可能还在学习。
我已经找到了解决其中一个问题的方法 - 我修复的问题是.after错误消息的重复。为了解决这个问题，我只是在每个if语句中添加$('p').remove('#after5');，然后if语句实际打印出.after错误消息。
if($('input[type=checkbox:checked').length < 1) {
$('p').remove('#after5');
$('#checkboxError').html('<p id="after5" style="color:red;" id="after5">Please check atleast one checkbox</p>');
return false;
}
else{
//This should remove the above error message!
$('p').remove('#after5');
}
当所有验证都正确时，我仍然无法打印出数据！
相关文章：
- 正在验证8个真/假复选框或复选框中的2个
- 使用javascript将动态表从一个html页面打印到另一个html页
- 借助asp.net验证或java脚本对多个文本进行验证
- JavaScript打印功能使日历停止工作
- jQuery自定义验证比较多个输入的序列
- 使用html中的外部javascript进行数据验证
- 如何使用jquery Validation验证Formspread
- jquery中的文本框验证
- 在验证和发送邮件后更改联系人表单的 html
- 代码不会验证
- esri javascript异步打印
- JS验证ajax返回的html中的表单数据
- 文本框不是从Javascript/Asp.net中的对话框中打印出来的
- 无法使用JavaScript打印带有for循环的验证错误
- jQuery 验证正在复制 else 语句 |验证完成后，不会打印值
- 验证表单并打印到表格
- 如何编写一个测试来验证函数是否已成功将字符串列表(在数组中指定）打印到屏幕上
- JavaScript表单验证错误未打印
- 验证然后打印日期输入
- 验证与Java脚本和打印
