My goal is to loop through a set of text fields and check if the user has input any values. However, I'm facing an issue where even though I have provided values in the text fields, it seems like they are empty. To better illustrate my problem, I have included a JSFIDDLE link for reference.
HTML Structure:
<div id='manage-appointment'>
<div class="span5">
<div class="control-group">
<label>first-name</label>
<div class="controls">
<input type="text" id="first-name" class="required" />
</div>
</div>
<div class="control-group">
<label>last-name</label>
<div class="controls">
<input type="text" id="last-name" class="required" />
</div>
</div>
<div class="control-group">
<label>email</label>
<div class="controls">
<input type="text" id="email" class="required" />
</div>
</div>
<div class="control-group">
<label>Operatorl</label>
<div class="controls">
<select id='options'>
<option value='op1'>Operator1</option>
</select>
</div>
</div>
<button id='press'>Check empty field</button>
</div>
Javascript:
document.getElementById('press').onclick = function()
{
var $dialog = $('#manage-appointment');
$dialog.find('.required').each(function()
{
if (!$(this).val() || $(this).has('option').length == 0)
{
$(this).parents().eq(1).addClass('error');
missingRequiredField = true;
}
});
}
CSS:
.error
{
background-color:red
}
Can you see anything incorrect in the code? Despite entering values into the text fields, they always trigger the error state. Why is this happening?