Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should use some kind of validator plugin. Personally I've used jquery tools form validator and it works great.. There are others as well. Check this: <a href="http://flowplayer.org/tools/validator/" rel="nofollow">http://flowplayer.org/tools/validator/</a></p> <p>I also use a plugin that I built which will take a form and submit it via ajax, and there are some out there which work real similar to mine:</p> <p><a href="http://jquery.malsup.com/form/" rel="nofollow">http://jquery.malsup.com/form/</a></p> <p>Is one example. This allows you to make the form in normal html and it will submit the form to the form's action url, and it will build the forms values the same way the browser would if you submitted without ajax. Thus, to whatever your backend script is the form fields submit just as if you hadn't used ajax.</p> <p>Since this seems like too much work for you, let me show you what your code looks like with and without it.</p> <p>Without (look above at your js).</p> <p>No assuming your form looks like this (simplified) </p> <pre><code>&lt;form method="POST" action="php/contact.php"&gt; &lt;label for="contact_name"&gt;Name&lt;/label&gt; &lt;input name="contact_name" id="contact_name" /&gt; &lt;br /&gt; &lt;label for="contact_email"&gt;Email&lt;/label&gt; &lt;input name="contact_email" id="contact_email" /&gt; &lt;br /&gt; &lt;label for="contact_phone"&gt;Phone&lt;/label&gt; &lt;input name="contact_phone" id="contact_phone" /&gt; &lt;br /&gt; &lt;label for="contact_zip"&gt;Zip&lt;/label&gt; &lt;input name="contact_zip" id="contact_zip" /&gt; &lt;br /&gt; &lt;label for="contact_best_time"&gt;Best time for Contact&lt;/label&gt; &lt;input name="contact_best_time" id="contact_best_time" /&gt; &lt;br /&gt; &lt;label for="contact_message"&gt;Message:&lt;/label&gt; &lt;input name="contact_message" id="contact_message" /&gt; &lt;/form&gt; </code></pre> <p>Now thats probably similar to what it looks like now without all the extra html for formatting.</p> <p>If you used both the validator and the ajax form validator you have to make hardly any changes. Let me show them.</p> <p>With the validator and ajax form you would then have this:</p> <pre><code>&lt;form method="POST" action="php/contact.php" class="use-validator ajax-form"&gt; &lt;label for="contact_name"&gt;Name&lt;/label&gt; &lt;input name="contact_name" id="contact_name" /&gt; &lt;br /&gt; &lt;label for="contact_email"&gt;Email&lt;/label&gt; &lt;input name="contact_email" id="contact_email" type="email" required="required" /&gt; &lt;br /&gt; &lt;label for="contact_phone"&gt;Phone&lt;/label&gt; &lt;input name="contact_phone" id="contact_phone" type="phone" /&gt; &lt;br /&gt; &lt;label for="contact_zip"&gt;Zip&lt;/label&gt; &lt;input name="contact_zip" id="contact_zip" required="required" /&gt; &lt;br /&gt; &lt;label for="contact_best_time"&gt;Best time for Contact&lt;/label&gt; &lt;input name="contact_best_time" id="contact_best_time" required="required" /&gt; &lt;br /&gt; &lt;label for="contact_message"&gt;Message:&lt;/label&gt; &lt;textarea name="contact_message" id="contact_message" required="required"&gt;&lt;/textarea&gt; &lt;/form&gt; </code></pre> <p>Then your js would be:</p> <pre><code>$.tools.validator.fn("[type=phone]", "Invalid phone number", function(input, value) { var phoneRegEx = /^(1-?)?\s?(\([2-9]\d{2}\)|\s?-?[2-9]\d{2})-?\s?[2-9]\d{2}-?\d{4}$/ return value.test(phoneRegEx); }); $("form.use-validator").validator(); $("form.ajax-form").ajaxForm({ success:function(){$('#contact-form').html("&lt;div id='message'&gt;&lt;/div&gt;");$('#message').html("&lt;h3&gt;Message Sent&lt;/h3&gt;").append("&lt;p&gt;Thank you for contacting us. We'll be in touch. &lt;br /&gt;&lt;br /&gt;If you have any further questions, you can always email us at info@wirecrafters.com or call us at 800-924-9473&lt;/p&gt;").hide().fadeIn(800,function(){$('#message').append("&lt;img id='checkmark' src='images/submit2.png' /&gt;");});}}); }); </code></pre> <p>And any custom validators you make you can reuse on other forms.. </p> <p>And then you may need some custom error messages but that's it.. You can delete all that other js code you have.</p>
    singulars
    1. This table or related slice is empty.
    1. POJavascript Validate on input change, only submit when Submit button clicked
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMatt Wolfe
    1. USMatt Wolfe
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COI updated my answer. I can't tell from your code exactly how errors look for your form but I've found that with the valiator plugin and a bit of work this will save you tons of code. And then the ajax form simplifies the process of submitting the form so you don't have to manually build the post/get values to send.
      singulars
      1. PO
      1. USMatt Wolfe
    2. COMy errors are styled with CSS and look like jquery tooltips. They have certain classes attached to them for styling, and then are shown or hidden depending on validation. If I use the updated code you included above, do I have to include/attach a "validate" file Or anything?
      singulars
      1. PO
      1. USadamdehaven
    3. COIf you have custom validation then you would need to make a validator for each. You could actually use the validator above in conjunction with the way way you are doing it now, but you would have to do a bit of work. Can you include in your original message what the html looks like for your form? I'm cursious how/where the errors show up.
      singulars
      1. PO
      1. USMatt Wolfe
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload