jquery - Issue with code to check for empty input field -

i found tutorial create email form send emails there seems error within java script code can found below:

$('#sendfeedback').on("click", function() { var url = 'api/send.php'; var error = 0; var $contactpage = $(this).closest('.ui-page'); var $contactform = $(this).closest('.contact-form'); $('.required', $contactform).each(function (i) {     if ($(this).val() === '') {         error++;     }  }); // each if (error > 0) {         alert('please fill in mandatory fields. mandatory fields marked asterisk *.'); }  else {//some code} 

the click works fine if fields populated error shows how can stop happening? note when remove part of code works. below html code:

<div class="contact-thankyou" style="display: none;">                 thank you.  message has been sent.  can.             </div>             <div class="contact-form">                 <p class="mandatory">all fields manadatory</p>                 <div data-role="fieldcontain">                     <label for="sendername">your name:</label>                     <input type="text" name="sendername" id="sendername" class="required">                 </div>                 <div data-role="fieldcontain">                     <label for="senderemail">your email address:</label>                     <input type="email" name="senderemail" id="senderemail" class="required">                 </div>                 <div data-role="fieldcontain">                     <label for="subjectcategories">subject</label>                         <select name="subjectcategories" id="subjectcategories" data-native-menu="false" class="required">                             <option value="" data-placeholder="true">select...</option>                             <option value="registration">register artist</option>                             <option value="feature">want music featured?</option>                             <option value="advertising">advertise company</option>                             <option value="app issues">app issues</option>                             <option value="general feedback">general feedback</option>                         </select>                 </div>                 <div data-role="fieldcontain">                     <label for="message">your message:</label>                     <textarea name="message" id="message" placeholder="please type message" class="required" cols="80" rows="10" maxlength="10000"></textarea>                     </div>                 <div class="send"><a href="javascript:;" data-role="button" data-iconpos="right" id="sendfeedback">send feedback</a></div>             </div> 

in code, want validate 4 fields class required. on #subjectcategories select menu, class required being added twice, 1 <select> popup menu, , other 1 added <span> under <a> calls select menu #subjectcategories. span has no value , caused error.

i made easy fix adding below code, right after triggering validation, remove required class span.

$('#sendfeedback').on("click", function () {  $($.mobile.activepage).find('span').removeclass('required');  //....  //the rest of code  //... });