Validate at least one TextBox from Multiple TextBoxes using JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about to validate at least one TextBox from multiple TextBoxes in JavaScript. The same code you can be used in various technologies like ASP.Net Web Forms, ASP.Net MVC and also in.Net Core.
Code for HTML Page
Implementation: On the HTML page i will place a three textboxes to enter the data for Address Proofs (At-least one) as the example I am explaining the article. First text box is to enter Licence Number by the user with the id named txt_licence. Second text box is to enter Electricity Number by the user with the id named txt_bill_number. Third one text box is to enter Allotted House Number by the user with the id named txt_housrnumber. i will also place a span with the id named lbl_message for display the error message i.e. Please enter at-least one Address proof. Here will also place a Button with the id named btn_submit and here i assigned a JavaScript function named Validate_anyone_textbox() on the OnClick event handler to the button.
<table>
<tr>
<th colspan="2">Address Proofs (At-least one)</th>
</tr>
<tr>
<td>Licence Number</td>
<td><input id="txt_licence" type="text" /></td>
</tr>
<tr>
<td>Electricity Bill Number</td>
<td><input id="txt_bill_number" type="text" /></td>
</tr>
<tr>
<td>Allotted House Number </td>
<td><input id="txt_housenumber" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<span id="lbl_message" style="color: Red; visibility: hidden;">
Please enter at-least one Address proof.
</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" onclick="Validate_anyone_textbox()" /></td>
</tr>
</table>
Validation using JavaScript
Inside the Validate_anyone_textbox JavaScript function, first the Textboxes are referenced and the values entered by the user will be fetched in the variables. After that condition or check will be performed one by one for each value of Licence Number, Electricity Bill Number and Allotted House Number respectively. If at least one of the textbox has value then the validation will be correct else the validation will be incorrect. The isValid variable set to True or False based on whether the validation is correct or incorrect respectively. Finally, based on the isValid variable, the result is displayed in the HTML SPAN element.
<script type="text/javascript">
function Validate_anyone_textbox() {
//Referencing and fetching the TextBox values.
var licence = document.getElementById("txt_licence").value;
var electricity_bill = document.getElementById("txt_bill_number").value;
var house_number = document.getElementById("txt_housenumber").value;
var isValid = false;
//Check if Licence Number is not filled.
if (licence.trim() != "") {
isValid = true;
}
//Check if Electricity Bill Number column is not filled.
if (electricity_bill.trim() != "") {
isValid = true;
}
//Check if House Number is not filled.
if (house_number.trim() != "") {
isValid = true;
}
//Show or hide HTML SPAN based on IsValid variable.
document.getElementById("lbl_message").style.visibility = !isValid ? "visible" : "hidden";
}
</script>
Here i am giving complete code for HTML page. You can copy and paste the whole code on your HTML page for enjoys the exaction of the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; }
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Fill atleast one Textbox</th>
</tr>
<tr>
<td>Licence Number</td>
<td><input id="txt_licence" type="text" /></td>
</tr>
<tr>
<td>Electricity Bill Number</td>
<td><input id="txt_bill_number" type="text" /></td>
</tr>
<tr>
<td>Allotted House Number </td>
<td><input id="txt_housenumber" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<span id="lbl_message" style="color: Red; visibility: hidden;">
Please enter at-least one Address proof.
</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit" onclick="Validate_anyone_textbox()" /></td>
</tr>
</table>
<script type="text/javascript">
function Validate_anyone_textbox() {
//Referencing and fetching the TextBox values.
var licence = document.getElementById("txt_licence").value;
var electricity = document.getElementById("txt_bill_number").value;
var housenumber = document.getElementById("txt_housenumber").value;
var isValid = false;
//Check if Passport Number is not blank.
if (licence.trim() != "") {
isValid = true;
}
//Check if Aadhar Number is not blank.
if (electricity.trim() != "") {
isValid = true;
}
//Check if PAN Number is not blank.
if (housenumber.trim() != "") {
isValid = true;
}
//Show or hide HTML SPAN based on IsValid variable.
document.getElementById("lbl_message").style.visibility = !isValid ? "visible" : "hidden";
}
</script>
</body>
</html>
Check the Output of the complete Program
If user will click on the submit button, without filling at least textbox then a error message will be displayed that is showing in the below screenshot.
Conclusion: In above code, I explained that how to implement the validation of at least one TextBox from multiple TextBoxes in JavaScript. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment