使用jquery抛出错误消息

Question

我有一个窗体有两个文本框，一个密码框，一个电子邮件域，三个单选按钮和三个复选框。我想要完成的是，如果某人没有在文本框中输入特定的数量，或者没有给出足够的密码字符，或者未能选择单选按钮，则会在旁边弹出一个小错误它会说“这个字段必须有两个以上的字符”。

HTML：

Text Field: <input type="text" name="fName" id="textField" /></br></br> 
Number Field: <input type="text" name="lName" id="numField" /></br></br> 
Email: <input type="email" name="email" id="email" /></br></br> 
Password: <input type="password" name="pWord" id="passWord" /></br></br> 

<input type="radio" name="click" value="radio1" id="rad1"> Radio 1</br> 
<input type="radio" name="click" value="radio2" id="rad2"> Radio 2</br> 
<input type="radio" name="click" value="radio3" id="rad3"> Radio 3</br> 
</br> 
<input type="checkbox" name="vehicle" value="bike" id="bike">Bike</br> 
<input type="checkbox" name="vehicle" value="motorcycle" id="mCycle">Motorcycle</br> 
<input type="checkbox" name="vehicle" value="car" id="car">Car/Pickup</br> 
<input type="checkbox" name="vehicle" value="public" id="public">Public (Bus/Train) 

我对这个没有工作脚本但因为我一直没能弄明白，但我已经尝试会是这样的：

if($('#textField').length < 2) { 
$("#textField").after('<span id="txt1">Must be atleast 2 characters</span>'); 
    } 

错误应该放在字段旁边，所以：

• text field =必须是2个字符。
• number field =必须是2个字符。
• 电子邮件=必须是电子邮件。
• password =必须是5个字符。
• 三个单选按钮 - 必须选择一个按钮
• 三个复选框 - 必须选择一个复选框

Answer 1

你可以做一些事情是这样的。错误位于代码行$('#textField').length中。它应该是$('#textField').val().length。您缺少.val()。

$("input").on("blur", function() { 
 
\t $(".error").remove(); //remove all error span elements 
 

 
\t if ($('#textField').val().trim().length < 2) { 
 
\t \t $("#textField").after('<span class="error"> Must be atleast 2 characters</span>'); 
 
\t \t $('#textField').focus(); 
 
\t \t return false; 
 
\t } 
 
\t if ($('#numField').val().trim().length < 2) { 
 
\t \t $("#numField").after('<span class="error"> Must be atleast 2 characters</span>'); 
 
\t \t $("#numField").focus(); 
 
\t \t return false; 
 
\t } 
 
\t if (!isEmail($("#email").val().trim())){ 
 
\t \t $("#email").after('<span class="error"> Must be email</span>'); 
 
\t \t $("#email").focus(); 
 
\t \t return false; 
 
\t } 
 
\t if ($('#passWord').val().trim().length !== 5) { 
 
\t \t $("#passWord").after('<span class="error"> Must be 5 characters</span>'); 
 
\t \t $("#passWord").focus(); 
 
\t \t return false; 
 
\t } 
 
\t if ($('input[name="click"]:checked').val() == undefined) { 
 
\t \t $("#rad3").next().after('<span class="error"> Must select one button</span>'); 
 
\t \t return false; 
 
\t } 
 
\t if ($('input[name="vehicle"]:checked').val() == undefined) { 
 
\t \t $("#public").next().after('<span class="error"> Must select one button</span>'); 
 
\t \t return false; 
 
\t } 
 
}); 
 

 
function isEmail(email) { 
 
\t var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
 
\t return regex.test(email); 
 
}

.error { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
Text Field: <input type="text" name="fName" id="textField" /></br> 
 
</br> 
 
Number Field: <input type="text" name="lName" id="numField" /></br> 
 
</br> 
 
Email: <input type="email" name="email" id="email" /></br> 
 
</br> 
 
Password: <input type="password" name="pWord" id="passWord" /></br> 
 
</br> 
 

 
<input type="radio" name="click" value="radio1" id="rad1"> Radio 1</br> 
 
<input type="radio" name="click" value="radio2" id="rad2"> Radio 2</br> 
 
<input type="radio" name="click" value="radio3" id="rad3"> Radio 3</br> 
 
</br> 
 
<input type="checkbox" name="vehicle" value="bike" id="bike">Bike</br> 
 
<input type="checkbox" name="vehicle" value="motorcycle" id="mCycle">Motorcycle</br> 
 
<input type="checkbox" name="vehicle" value="car" id="car">Car/Pickup</br> 
 
<input type="checkbox" name="vehicle" value="public" id="public">Public (Bus/Train)

Answer 2

您可以使用required和minlength属性，在change事件<input type="checkbox">元素的去除同胞的required属性<input tyep="checkbox">要素看Required attribute on multiple checkboxes with the same name? 。注意，HTML <br>标签是自封闭或使用正斜杠前><br/>

document.forms[0].querySelectorAll("[name=vehicle]") 
 
.forEach((checkbox, index) => { 
 
    checkbox.onchange =() => { 
 
    let selector = "[name=vehicle]:not(:nth-child("+ index + 1 +"))"; 
 
    document.forms[0].querySelectorAll(selector).forEach(not => { 
 
     not.removeAttribute("required") 
 
    }) 
 
    } 
 
})

<form> 
 
    Text Field: <input type="text" name="fName" id="textField" minlength="2" required /><br><br> Number Field: <input type="text" name="lName" id="numField" minlength="2" required /><br><br> Email: <input type="email" name="email" id="email" /><br><br> Password: <input type="password" name="pWord" id="passWord" minlength="5" required/><br><br> 
 
    <input type="radio" name="click" value="radio1" id="rad1" required> Radio 1<br> 
 
    <input type="radio" name="click" value="radio2" id="rad2" required> Radio 2<br> 
 
    <input type="radio" name="click" value="radio3" id="rad3" required> Radio 3<br> 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="bike" id="bike" required>Bike<br> 
 
    <input type="checkbox" name="vehicle" value="motorcycle" id="mCycle" required>Motorcycle<br> 
 
    <input type="checkbox" name="vehicle" value="car" id="car" required>Car/Pickup<br> 
 
    <input type="checkbox" name="vehicle" value="public" id="public" required>Public (Bus/Train)<br> 
 
    <input type="submit"> 
 
</form>