Question

I have a form with the fields structured in the following format:

<span class="req">*</span>
<label for="name">Name</label><br>
<input type="text" id="name">

On submit, I would like to mark the empty fields that have an asterisk before them. I assume I can use .each() to loop through my form fields, but how do I target only required fields?

Answer 1

$('.req').each(function(){
    if($(this).text()=='*') {
        if(!$(this).siblings('input').val()) {//Has no value
            //DO STUFF HERE
        }
    }
});

Like this?

Or you could do something like this:

$('input').each(function(){
    //IF NO VALUE AND IS REQUIRED
    if(!$(this).val() && $(this).siblings('.req').length != 0) {
        $(this).addClass('error');//AS PRAVEEN SUGGESTS
        alert('Field is required');
    }
});

WARNING
This code assumes that your span, label and input are inside of another element and don’t share other inputs and .req‘s. Otherwise the .siblings() method will return multiple elements.