Hello, I'm struggling to understand why this form isn't validating upon submission. I've chosen not to use jQuery's built-in validate function in this case. Essentially, the code is designed to show an error image and prevent form submission if a field is left blank.
The form itself is contained within a modal window that fades in upon clicking a button and can be closed. However, the issue I'm facing is that the form is automatically processed upon submission instead of jQuery displaying any errors.
Below is the HTML code for the form:
<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">Graphics</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>
And 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;
}
});