jQuery or JavaScript Validation required if yes radio button is chosen

Question

Can someone help me with jQuery or JavaScript Validation? Basically what I have going on is I have 2 radio buttons. First radio button brings out three textboxes second radio button removes them.

If the first radio button is chosen then I need all three of those text boxes to be required. If the second radio button is chosen then they will not be required.

I am super close except the alerts are all separate and it just accepts on the second alert and goes on to the next page. I need it to stop and not go through and also show the alert for the third textbox.

Ideally if one and two of the textboxes are missing I would like them on the same alert but I have no idea how to code that as of right now there all separate and there own alert.

Any help would be deeply appreciated! I have been stuck on this for a while now!

http://jsfiddle.net/t4Lgm0n2/

 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

This is a jquery Form confirmation solution

• 1- hide() and show() yours divs on change of your selected choice
• 2-add a click function in your submit button to check which input is empty and update the alert message
• 3-if your "Lien" option is selected and one or more input is empty return false, so the form will not be submited

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

Their are two things:

1. The id you are using to validate the third "date" input is wrong, it should be "datepicker2" as specified in html.

2. In order to achieve the error in single alert box please follow the above code.

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;


}


}