Question

我是JQuery和Javascript的新手，需要你对我在这里缺少的东西的帮助。我知道代码在jsfiddle.net中有效，但是当我实际在计算机上运行它时它没有做任何事情。我想在＃34; updated-formcheck.js＆＃34;中保留面向对象的功能。单独归档。

我有一个带有jQuery函数的表单验证HTML文件，该函数调用我的＆＃34; updated-formcheck.js＆＃34;检查所有空字段并返回消息的文件。但是当单击提交按钮时，没有任何反应。你能告诉我为什么吗？

HTML文件：

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

in＆＃34; updated-formcheck.js＆＃34;文件：

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

Answer 1

为了让您的代码正常工作，我添加了一个＆＃34; required＆＃34;您的js代码正在寻找的类，在city元素上。我还将jQuery绑定事件更新为表单提交而不是按钮单击。

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

Answer 2

因为

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

代码中的

当前返回一个空数组，因此不会调用每个函数。

这是因为你正在寻找带有css类的dom元素＆＃34; required＆＃34;你没有。

从jQuery调用面向对象的函数

2 个答案: