jQuery에서 객체 지향 함수 호출

-1

저는 JQuery와 Javascript에 익숙하지 않습니다. 여기에서 누락 된 부분에 대한 도움이 필요합니다. 나는 코드가 jsfiddle.net에서 작동한다는 것을 알고 있지만 실제로 컴퓨터에서 실행하면 아무 것도하지 않습니다. 객체 지향 함수를 "updated-formcheck.js"파일에 별도로 보관하고 싶습니다.jQuery에서 객체 지향 함수 호출

모든 빈 필드를 검사하고 msg를 반환하는 "updated-formcheck.js"파일을 호출하는 jQuery 함수로 양식 유효성 검사 HTML 파일이 있습니다. 그러나 제출 버튼을 클릭하면 아무 일도 일어나지 않습니다. 왠지 말해줘?

HTML 파일 : "업데이트-formcheck.js"파일에서

<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 am 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>

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; 
}

출처

2014-09-10 missgg

자바 스크립트 콘솔에 오류가 있습니까? – David

코드를 살펴볼 때 작동하는 것처럼 보입니다. 지금까지 문제의 근원을 알아 내기 위해 무엇을 했습니까? –

때문에, 각각의 함수가 호출되지 않습니다.

당신이 갖고 있지 않은 CSS 클래스 "필수"를 가진 dom 요소를 찾고 있기 때문입니다.

출처

2014-09-10 15:32:47 brillantef

네가 맞아! class = required가 아닌 HTML 문서 작업을하고있었습니다. 입력 주셔서 감사합니다 !!!! – missgg

가 나는 "필요한"클래스를 추가 작업 코드를 얻으려면, 당신의 JS 코드를 찾고 에 대한, 도시 요소에. 또한 jQuery 바인드 이벤트를 버튼 클릭 대신 양식 제출으로 업데이트했습니다. 코드에서

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

현재 빈 배열을 반환

<html> 
    <head> 
    </head> 
    <body> 
    <form id="myform" method="post" action="#"> 
    <fieldset> 
     <label for="attendee">I am 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="" class="required" /> 
     </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 src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="updated-formcheck.js" ></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myform').on('submit', function(e) { 
      //e.preventDefault(); 
      validateNow(e); 
      return false; 
     }); 
    }); 
    </script> 
    </body> 
    </html>

출처

2014-09-10 15:31:37 jdunham

네, 맞습니다! 나는 class = "required"필드를 놓치고 있었다. 귀하의 의견을 주셔서 감사합니다 !! – missgg

jQuery에서 객체 지향 함수 호출

답변

관련 문제