CODEWITHSUNDEEP
javascripthtml
ramivip99
ramivip99

Reputation: 13

HTML/JS : Required input X ignored if input Y is filled

Good day!

So I have a simple HTML form which has 4 inputs:

name | email | name2 | email2

Currently all the fields are required but, is it possible that if I fill the first two inputs (name, email), the required other inputs (name2, email2) can be left blank, and the other way around too ..

Here's my code

<form action="register.php" method="post">
    <table background="images/bg.jpg" align="center" style="height: 295px;  width: 800px;" border="0">
        <tbody>
    <tr>
    <!------------------------------- Individual ------------------------------>
        <p style="text-align: left; "><b>Name</b>
        <input name="name" style="height:30px;" type="text" value="" placeholder="" required="required" /><img src="jvk/button.gif"></p>
      <p style="text-align: left; "><b>Email</b>
      <input name="email" style="height:30px;" type="text" value="" placeholder="" required="required" />;
      <button class="indiv" type="submit">Submit ></button>
      </p>
   </td>
   <!------------------------------- Enterprise ------------------------------>
    <td style="width: 297px;">
    <p style="text-align: left;">-<b>Company name</b>
    <br />
        <input name="name2" type="text" value=""  style="height:30px;" placeholder="" required="required" /><img src="jvk/button.gif"></p>
        <p>-<b>Email<br/>
        <input name="email2" type="text" value="" style="height:30px;" placeholder="" required="required" />
        <button type="submit" class="busin">Submit ></button></p>
</td>
</tr>

For now, I can't move on until the 4 inputs are filled, I have been searching for the solution but since I have no skills in programming I couldn't fix it.

Please help. Thank you in advance

Upvotes: 0

Views: 75

Answers (1)

Lance M
Lance M

Reputation: 61

Run this after the user has inputted the data and it will disable the "required" attribute for the "Individual" or "Enterprise" depending on which two input tags are filled. 

function checkRequired(){
	if(document.querySelector("[name=name]").value != "" && document.querySelector("[name=email]").value != ""){
		document.querySelector("[name=name2]").required  = false;
		document.querySelector("[name=email2]").required = false;
	}else{
		document.querySelector("[name=name]").required  = false;
		document.querySelector("[name=email]").required = false;
	}
}

Upvotes: 1

Related Questions