在使用jquery的模态窗口中验证表单输入的问题 [英] problems validating form input in a modal window with jquery

问题描述

您好，所以我不能找出为什么这个表单将不提交验证。我不使用jquery库的内置validate函数。基本上所有的小代码是为我做的是如果字段是空白，然后显示错误图像，并停止提交表单。

Hi so i cant seem to figure out why this form will not validate on submit. I am not using the jquery library's built in validate function. Basically all the little code is doing for me is if the field is blank then show the error image and stop the form from being submitted.

然而形式是在一个模态其中点击按钮的窗口被淡入并且可以被关闭。

The form however is in a modal window which onclick on a button is faded in and can be closed. The problem i am having is that on submit the form is automatically being processed instead of jquery showing the errors.

这里是表单代码

<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代码。

Here is the jquery code.

$(".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;
    }
}); 

推荐答案

从您的表单中移除操作属性

remove action attribute from your form

这篇关于在使用jquery的模态窗口中验证表单输入的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！