Question

我的表单有两个文本字段，一个密码字段，一个电子邮件字段，三个单选按钮和三个复选框。我想要完成的是，如果某人没有在文本字段中输入特定金额，或者没有为密码提供足够的字符，或者未能选择单选按钮，那么会出现错误，旁边会出现类似＆＃34的内容;此字段必须包含两个以上的字符＆＃34;。

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个字符。
数字字段=必须是2个字符。
email =必须是电子邮件。
密码=必须是5个字符。
三个单选按钮 - 必须选择一个按钮
三个复选框 - 必须选中一个复选框

Answer 1

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

$("input").on("blur", function () {
	$(".error").remove(); //remove all error span elements

	if ($('#textField').val().trim().length < 2) {
		$("#textField").after('<span class="error">  Must be atleast 2 characters</span>');
		$('#textField').focus();
		return false;
	}
	if ($('#numField').val().trim().length < 2) {
		$("#numField").after('<span class="error">  Must be atleast 2 characters</span>');
		$("#numField").focus();
		return false;
	}
	if (!isEmail($("#email").val().trim())){
		$("#email").after('<span class="error">  Must be email</span>');
		$("#email").focus();
		return false;
	}
	if ($('#passWord').val().trim().length !== 5) {
		$("#passWord").after('<span class="error">  Must be 5 characters</span>');
		$("#passWord").focus();
		return false;
	}
	if ($('input[name="click"]:checked').val() == undefined) {
		$("#rad3").next().after('<span class="error">  Must select one button</span>');
		return false;
	}
	if ($('input[name="vehicle"]:checked').val() == undefined) {
		$("#public").next().after('<span class="error">  Must select one button</span>');
		return false;
	}
});

function isEmail(email) {
	var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	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">元素属性，请参阅{ {3}}。请注意，HTML <br>标记在> <br/>

之前是自动关闭或使用正斜杠

＆＃13;

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")
    })
  }
})

＆＃13;

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

＆＃13;

使用Jquery抛出错误消息

2 个答案: