Check if HTML row inputs are empty
Question
I'm a newbie in HTML and JavaScript world. Basically, I'm trying to validate an HTML table.
I wanna validate on form submit, if any of the elements (inputs or selects) on a table row have a value all the row elements must be completed. For example:
- if all the elements (inputs or selects) on a row are empty then it's Ok
- if all the elements (inputs or selects) on a row are completed then it's Ok
- if only 1, 2 or 3 elements (inputs or selects) on a row are completed then it's not ok (you must complete all of them or none of them), I wanna show an alert to indicate that all the row elements must be completed.
I'm trying to help me to understand how to resolve this problem by searching online. I'm struggling to adaptate the below code to do that:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="post" id="myform" onsubmit="return validate(this);">
<table>
<thead>
<tr>
<th>type</th>
<th>subtype</th>
<th>quantity</th>
<th>attachment</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="q">
<option disabled selected value> -- select an option -- </option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</td>
<td>
<select name="w">
<option disabled selected value> -- select an option -- </option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</td>
<td>
<input type="number" name="e" />
</td>
<td>
<input type="file" name="r">
</td>
</tr>
<tr>
<td>
<select name="t">
<option disabled selected value> -- select an option -- </option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</td>
<td>
<select name="y">
<option disabled selected value> -- select an option -- </option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</td>
<td>
<input type="number" name="u" />
</td>
<td>
<input type="file" name="i">
</td>
</tr>
<tr>
<td>
<select name="o">
<option disabled selected value> -- select an option -- </option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</td>
<td>
<select name="p">
<option disabled selected value> -- select an option -- </option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</td>
<td>
<input type="number" name="a" />
</td>
<td>
<input type="file" name="s">
</td>
</tr>
<tr>
<td>
<select name="d">
<option disabled selected value> -- select an option -- </option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</td>
<td>
<select name="f">
<option disabled selected value> -- select an option -- </option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</td>
<td>
<input type="number" name="g" />
</td>
<td>
<input type="file" name="h">
</td>
</tr>
<tr>
<td>
<select name="j">
<option disabled selected value> -- select an option -- </option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</td>
<td>
<select name="k">
<option disabled selected value> -- select an option -- </option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select>
</td>
<td>
<input type="number" name="l" />
</td>
<td>
<input type="file" name="m">
</td>
</tr>
</tbody>
</table>
<input type="submit" value="submit" />
</form>
<script>
function validate(frm) {
var tb = frm.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
var trs = tb.getElementsByTagName("tr");
for (var i=0; i < trs.length; i++) {
var inputs = trs[i].getElementsByTagName("input");
if (!validateEmpty(inputs[0]) || !validateEmpty(inputs[1])) {
return false;
}
}
return true;
}
function validateEmpty(obj) {
if (obj.value == "") {
alert("empty!");
obj.select();
return false;
}
return true;
}
</script>
</body>
Can you help me to resolve this? Thxs.
UPDATE!
<script>
function validate(frm) {
const trs = [...document.querySelectorAll('#myform tr')];
const isValid = trs.every((tr) => {
const inputs = [...tr.querySelectorAll('input')];
const selects = [...tr.querySelectorAll('select')];
if (
inputs.every(input => input.value.length === 0) &&
selects.every(select => select.selectedIndex === 0)
) {
// valid:
return true;
}
return (
inputs.every(input => input.value.length > 0) &&
selects.every(select => select.selectedIndex !== 0)
alert("empty!");
);
});
}
</script>
1 answers
solution1
2 ACCPTED 2018-04-15 00:31:48
Pretty easy, just iterate over all trs , and iterate over each input and select inside. Use the Array methods to make the syntax easiest:
const trs = [...document.querySelectorAll('#myform tr')];
const isValid = trs.every((tr) => {
const inputs = [...tr.querySelectorAll('input')];
const selects = [...tr.querySelectorAll('select')];
if (
inputs.every(input => input.value.length === 0) &&
selects.every(select => select.selectedIndex === 0)
) {
// valid:
return true;
}
return (
inputs.every(input => input.value.length > 0) &&
selects.every(select => select.selectedIndex !== 0)
);
});
I'm using input.value.length rather than just a boolean check of input.value so that inputs of 0 will be accepted as valid as well.
Here's a live snippet that uses Array.from instead, in case you're using an ancient browser:
document.querySelector('#myform').addEventListener('submit', validate); function validate(e) { e.preventDefault(); const trs = Array.from(document.querySelectorAll('#myform tr')); const isValid = trs.every((tr) => { const inputs = Array.from(tr.querySelectorAll('input')); const selects = Array.from(tr.querySelectorAll('select')); if ( inputs.every(input => input.value.length === 0) && selects.every(select => select.selectedIndex === 0) ) { // valid: return true; } return ( inputs.every(input => input.value.length > 0) && selects.every(select => select.selectedIndex !== 0) ); }); console.log(isValid); }
<form method="post" id="myform"> <table> <thead> <tr> <th>type</th> <th>subtype</th> <th>quantity</th> <th>attachment</th> </tr> </thead> <tbody> <tr> <td> <select name="q"> <option disabled selected value> -- select an option -- </option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </td> <td> <select name="w"> <option disabled selected value> -- select an option -- </option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </td> <td> <input type="number" name="e" /> </td> <td> <input type="file" name="r"> </td> </tr> <tr> <td> <select name="t"> <option disabled selected value> -- select an option -- </option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </td> <td> <select name="y"> <option disabled selected value> -- select an option -- </option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </td> <td> <input type="number" name="u" /> </td> <td> <input type="file" name="i"> </td> </tr> <tr> <td> <select name="o"> <option disabled selected value> -- select an option -- </option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </td> <td> <select name="p"> <option disabled selected value> -- select an option -- </option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </td> <td> <input type="number" name="a" /> </td> <td> <input type="file" name="s"> </td> </tr> <tr> <td> <select name="d"> <option disabled selected value> -- select an option -- </option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </td> <td> <select name="f"> <option disabled selected value> -- select an option -- </option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </td> <td> <input type="number" name="g" /> </td> <td> <input type="file" name="h"> </td> </tr> <tr> <td> <select name="j"> <option disabled selected value> -- select an option -- </option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> </td> <td> <select name="k"> <option disabled selected value> -- select an option -- </option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </td> <td> <input type="number" name="l" /> </td> <td> <input type="file" name="m"> </td> </tr> </tbody> </table> <input type="submit" value="submit" /> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Check if all inputs are empty
Check in inputs are empty then continue submition
Check if inputs in form are empty in Jquery
Check if inputs form are empty jQuery
how to check if a html table has duplicated rows in js and sum inputs instead of insert another row?
Uncheck row checkbox if inputs are empty on blur?
Check if inputs are empty or have text instead of numbers
Jquery - How to check if all inputs in a div are not empty?
Check if all inputs are empty (have no value)
jQuery check if one of the inputs with same class is not empty
Related Tags