使用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>