Question

有人可以帮助我使用jQuery或JavaScript验证吗？基本上我发生的事情是我有2个单选按钮。第一个单选按钮带出三个文本框，第二个单选按钮将其删除。

如果选择了第一个单选按钮，那么我需要所有这三个文本框。如果选择了第二个单选按钮，则不需要它们。

我非常接近，除了警报都是独立的，它只是在第二个警报上接受并继续下一页。我需要它停止而不是通过，并显示第三个文本框的警报。

理想情况下，如果缺少一个和两个文本框，我希望它们处于相同的警报状态，但我不知道如何编码，因为现在所有单独的文本框都有自己的警报。

任何帮助都将深表感谢！我已经被困在这一段时间了！

function validateForm(){
	var QnoText = ['lien'];  // add IDs here for questions with optional text input
	var ids = '';
	flag = true;
	for (i=0; i<QnoText.length; i++) {
		CkStatus = document.getElementById(QnoText[i]).checked;
		ids = QnoText[i]+'lname';
		if (CkStatus && document.getElementById(ids).value == '') {
			alert('Please enter lienholder name.');
			document.getElementById(ids).focus();
			flag = false;
		}
		ids2 = QnoText[i]+'laddress';
		if (CkStatus && document.getElementById(ids2).value == '') {
			alert('Please enter lienholder address.');
			document.getElementById(ids2).focus();
			flag = false;
		}
		ids3 = QnoText[i]+'ldate';
		if (CkStatus && document.getElementById(ids3).value == '') {
			alert('Please enter lien date.');
			document.getElementById(ids3).focus();
			flag = false;
		}
	}
  return flag;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>

&nbsp;&nbsp;&nbsp;<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>

<script type="text/javascript">
function showhideForm(lien) {
    if (lien == "Yes") {
        document.getElementById("div1").style.display = 'block';
        document.getElementById("div2").style.display = 'none';
    } 
   else if (lien == "None") {
        document.getElementById("div2").style.display = 'block';
        document.getElementById("div1").style.display = 'none';
		$("#div1 > .clearfix input:text").val("");
    }
}
</script>

<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
            </p>
            <p>
            <label for="laddress">Lienholder Address:</label>
            <input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
            </p>
            <p>
            <label for="ldate">Date of Lien:</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
                </div>
                </div>
                <div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
                <input type="submit" name="submit" value="Next" onclick="validateForm()">

Answer 1

这是一个jquery Form confirmation解决方案

1 - hide()和show()您所选择的change上的div 选择
2 - 在提交按钮中添加单击功能以检查输入是什么清空并更新警报消息
3 - 如果选择了“Lien”选项且一个或多个输入为空，则返回 false，所以表格不会被提交

Answer 2

function validateForm(){
    var QnoText = ['lien'];  // add IDs here for questions with optional text input
    var ids = '';
    flag = true;
    for (i=0; i<QnoText.length; i++) {
        CkStatus = document.getElementById(QnoText[i]).checked;
        ids = QnoText[i]+'lname';
        var eD = "";
        if (CkStatus && document.getElementById(ids).value == '') {
            eD = eD+' lienholder name';
            document.getElementById(ids).focus();
            flag = false;
        }
        ids2 = QnoText[i]+'laddress';
        if (CkStatus && document.getElementById(ids2).value == '') {
            eD=eD+' lienholder address';
            document.getElementById(ids2).focus();
            flag = false;
        }
        ids3 = 'datepicker2';
        if (CkStatus && document.getElementById(ids3).value == '') {
            eD=eD+' lien date';
            document.getElementById(ids3).focus();
            flag = false;
        }
        if(eD!="") alert("Please enter "+eD);
    }
  return flag;
}

他们有两件事：

您用于验证第三个＆＃34;日期＆＃34;的ID输入错误，应该是＆＃34; datepicker2＆＃34;如html中所述。
要在单个提示框中显示错误，请按照上述代码进行操作。

jsfiddle.net/t4Lgm0n2/9

Answer 3

Simplified example

function validateForm(){

var errMsg ='';

var tempVal = $('#lienlname').val();

if (tempVal===''){

    errMsg+='Please enter last name\n';

}

tempVal = $('#lienladdress').val();

if (tempVal===''){

    errMsg+='Please enter address\n';

}

 tempVal = $('#datepicker2').val();


if (tempVal===''){

    errMsg+='Please enter date\n';

}

if (errMsg ===''){

    return true;
}
else{

    alert(errMsg);
    return false;


}


}

如果选择是单选按钮，则需要jQuery或JavaScript验证

3 个答案: