I have these two forms. One collects profile data (that’s all text), the other is an Image upload form. I’ve kept these two separate to make things easier. I’m using the jQuery validate plugin to validate the profile data form, and that’s doing it’s job well.
My problem is with the second one. How do I validate both, so if a user filled in his profile data but did not upload an image, the form would not submit and would display a message. Can you offer any suggestions?
The Profile data form:
<form id="profileData">
//Form fields go here
<input type="submit" name="submit" value="Submit" />
</form>
Image upload form:
<form id="profileImage" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit" name="submit" value="Submit" />
</form>
If you are validating both at the same time there is no reason that you cant make both part of the same form. If you are using two differnet forms but validation constraints are shared between both, your logic will always fail until you encapsulate both inside the same form.
Do this instead: