https://www.machform.com/forums/ MachForm Community Forums Topic: Have JQuery working, I need some help, Final Issue :) en Thu, 18 Jun 2026 14:07:52 +0000 https://www.machform.com/forums/topic/have-jquery-working-i-need-some-help-final-issue-#post-10609 Thu, 07 Oct 2010 10:27:31 +0000 samerbazzi 10609@https://www.machform.com/forums/ <p>Can anyone help on this :( its the final task I have for my project... </p> https://www.machform.com/forums/topic/have-jquery-working-i-need-some-help-final-issue-#post-10588 Mon, 04 Oct 2010 07:40:22 +0000 samerbazzi 10588@https://www.machform.com/forums/ <p>Hey all,</p> <p>I have JQuery working using the Ketchup Library: </p> <p><a href="http://demos.usejquery.com/ketchup-plugin/" rel="nofollow">http://demos.usejquery.com/ketchup-plugin/</a></p> <p>Now it is working fine but the styling coming from ketchup is not that good, it shows these small pop-ups which is the default styling from ketchup, this does not work well with machform because the layers go hidden behind the text boxes and other form elements which is not good, it is not a very good user experience,</p> <p>I need a way to style the code I will post below to show up say in a Message Box when the user hits submit or to show the errors under each element like they have here: </p> <p><a href="http://demos.usejquery.com/ketchup-plugin/yourway.html" rel="nofollow">http://demos.usejquery.com/ketchup-plugin/yourway.html</a></p> <p>Everything else is working Great thx to the guys from Mach Form,</p> <p>I would be more than happy to share this functionality with the Mach Form community if someone can help me get the styling working correctly, Unfortunately I do not have a lot of JQuery Experience so this makes it hard for me to do,</p> <p>Below is the code I used to make it work with Mach Form: </p> <p>&lt;link rel="stylesheet" type="text/css" media="screen" href="/form-lead-management/js/ketchup-plugin/css/jquery.ketchup.css" /&gt;</p> <p>&lt;script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.js"&gt;&lt;/script&gt;</p> <p>&lt;script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.messages.js"&gt;&lt;/script&gt;<br /> &lt;script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.validations.basic.js"&gt;&lt;/script&gt;</p> <p>&lt;script type="text/javascript"&gt;<br /> $(document).ready(function() {<br /> //add ketchup class to field</p> <p> //name<br /> $('#form_3 input#element_2_1').addClass("validate(required)");<br /> $('#form_3 input#element_2_2').addClass("validate(required)");<br /> $('#form_3 input#element_2_3').addClass("validate(required)");<br /> $('#form_3 input#element_2_4').addClass("validate(required)");</p> <p> //phone<br /> $('#form_3 input#element_1_1').addClass("validate(required)");<br /> $('#form_3 input#element_1_2').addClass("validate(required)");<br /> $('#form_3 input#element_1_3').addClass("validate(required)");</p> <p> //email<br /> $('#form_3 input#element_3').addClass("aaaaaaaaaaaaaaaaa");</p> <p> //city<br /> $('#form_3 input#element_5').addClass("validate(required)");</p> <p> //service<br /> $('#form_3 input#element_4').addClass("validate(required)");</p> <p> $('#form_3').ketchup();</p> <p>});<br /> &lt;/script&gt; </p>