Question

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.

Here is the forms code

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

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

Answer 1

remove action attribute from your form