jquery - 使用 jquery 在模态窗口中验证表单输入的问题

Question

您好，我似乎无法弄清楚为什么此表单在提交时无法验证。我没有使用 jquery 库的内置验证函数。基本上所有的小代码都是为我做的，如果该字段为空，则显示错误图像并停止提交表单。

然而，表单位于模态窗口中，单击按钮会淡入并可以关闭。我遇到的问题是在提交时自动处理表单而不是 jquery 显示错误。

这是表单代码

<div id="blanket" style="display:none;" ></div>
<div id="window" style="display:none;" >
    <div id="close"><a class="close" id="hidetrigger" href="#"><img src="../images/close-btn.png" /></a></div>
    <div class="formtitle"><div class="required">Please fill in required fields (<span class="asterix">*</span>) below!</div></div>
    <div class="clear"></div>
    <form id="quoteform" method="post" action="/" enctype='multipart/form-data'>
    <p><label for="name" class="label">Name(<span class="asterix">*</span>):</label>
       <input type="text" class="fields" name="name"  />
       <label class="error" for="name" id="name_error"></label>
       <select name="budget" class="dropdownfieldbudget">
                      <option value="0">Please Select...</option>
                      <option value="N/A">N/A</option>
                      <option value="$1-200">$0 - $200</option>
                      <option value="$200-500">$200 - $500</option>
                      <option value="$500 +">$500 +</option>
                    </select>
    <label for="budget" class="labelbudget">Budget(<span class="asterix">*</span>):</label>
    <label class="error" for="budget" id="budget_error"></label>

    </p>

    <p><label for="email" class="label">Email(<span class="asterix">*</span>):</label>
        <input type="text" class="fields" name="email"  />
        <label class="error" for="email" id="email_error"></label>
        <input type="file" name="file" class="fileattach" />
        <label for="file" class="labelfile">File(<span class="asterix">.zip</span>):</label>
        <label class="error" for="file" id="file_error"></label>
    </p> 



    <p><label for="organisation" class="label">Organisation:</label>
        <input type="text" class="fields" name="organisation"  />
               <label class="error" for="type" id="type_error"></label>
       <input type="checkbox" class="checkbtn" name="type" value="Graphic Design" /><span class="checkbtn">Graphic's</span>
       <input type="checkbox" class="checkbtn" name="type" value="Conversion" /><span class="checkbtn">Conversion</span>
       <input type="checkbox" class="checkbtn" name="type" value="Web Design" /><span class="checkbtn">Web Design</span>
       <label for="budget" class="labelwork">Type(<span class="asterix">*</span>):</label>
    </p>



    <p><label for="country" class="label">Country:</label>
        <input type="text" class="fields" name="country"  /></p>
    <p><label for="comment" class="label">Comments:</label>
       <textarea name="comment" class="txtfield" ></textarea> 
    <p><label for="hearabout" class="labelhear">Where did you hear about us?</label>
                    <select name="hearabout" id="hearabout" class="dropdownfield">
                      <option value="0">Please Select..</option>
                      <option value="Another Website">Another Website</option>
                      <option value="Email">Email</option>
                      <option value="Online Advertisements">Online Advertisements</option>
                      <option value="Printed Media">Printed Media</option>
                    </select></p> 

    <p><label style="height:45px" for="submit" class="label"></label>
        <div class="submitwrapper"><input type="submit" class="submitbtn" value="SUBMIT" name="submit"  /> <div class="success"><span class="blue"></span></div></div></p>  
        <div class="clear"></div>                     

    </form>
</div>

这是 jquery 代码。

$(".submitbtn").click(function() {
    $(".error").hide(); 
    var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
    var email = $("input#email").val();
        AtPos = email.indexOf("@")
        StopPos = email.lastIndexOf(".")
    if (AtPos == -1 || StopPos == -1) {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
}); 

Answer 1

从表单中删除 action 属性