javascript - Calling a Object Oriented function from jQuery -

i kind of new jquery , javascript , need on missing here. know code works in jsfiddle.net when run on computer it's not doing anything. want keep object oriented functions in "updated-formcheck.js" file separately.

i have form validation html file jquery function calls "updated-formcheck.js" file checks empty fields , returns msg. when submit button clicked, nothing happens. can tell me why?

html file:

<script src="updated-formcheck.js" type="text/javascript"></script>   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>   <form id="myform" method="post" action="#"> <fieldset>     <label for="attendee">i a...<font color="red">*</font>:<br />     <br />   </label>     <select id="attendee" name="attendee" >         <option value="">-- please choose --</option>         <option value="returning" >returning attendee</option>         <option value="first_time" >first time attendee</option>     </select>      <label for="fullname"><br />     <br />   full name<font color="red">*</font>:</label>     <p><input type="text" id="fullname" name="fullname" value="" />     </p>     <p>&nbsp;</p> <label for="address1">street address<font color="red">*</font>:</label>     <p>       <input type="text" id="address1" name="address1" value=""/>  </p>     <p>            <input type="text" id="address2" name="address2" value="" />      </p>     <label for="city"><br />   city<font color="red">*</font>:</label>      <p>       <input type="text" id="city" name="city" value="" />      </p>     <label for="stateprovince"><br />   state/county/province:</label>     <p>       <input type="text" id="stateprovince" name="stateprovince" value="" />     </p>       <label for="zippostalcode">zip/postal code:<br /> </label>     <p>       <input type="text" id="zippostalcode" name="zippostalcode" value="" />     </p>       <input type="hidden" name="submitted" value="true" />     <input type="submit" value="submit" id="btnsubmit"/> </fieldset> </form>  <script type="text/javascript"> $(document).ready(function() {     $('#btnsubmit').click(function(e) {         validatenow(e);     }); });  </script> 

in "updated-formcheck.js" file:

function validatenow(eventobj){     var isvalid = true;      $('input[type="text"].required, textarea.required, select.required').each(function() {         if ($.trim($(this).val()) == '') {             isvalid = false;             $(this).css({                 "border": "1px solid red",                 "background": "#ffcece"             });         }         else {             $(this).css({                 "border": "",                 "background": ""             });         }     });     if (isvalid == false) {         eventobj.preventdefault();         alert(this.e);     }else          this.s; } 

because

$('input[type="text"].required, textarea.required, select.required') 

in code return empty array, each function not called.

this because looking dom elements css class "required" doesn't have.