MachForm Community Forums » MachForm 2

1. samerbazzi
   Member

   Hey all,

   I have JQuery working using the Ketchup Library:

   http://demos.usejquery.com/ketchup-plugin/

   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,

   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:

   http://demos.usejquery.com/ketchup-plugin/yourway.html

   Everything else is working Great thx to the guys from Mach Form,

   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,

   Below is the code I used to make it work with Mach Form:

   <link rel="stylesheet" type="text/css" media="screen" href="/form-lead-management/js/ketchup-plugin/css/jquery.ketchup.css" />

   <script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.js"></script>

   <script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.messages.js"></script>
   <script type="text/javascript" src="/form-lead-management/js/ketchup-plugin/js/jquery.ketchup.validations.basic.js"></script>

   <script type="text/javascript">
   $(document).ready(function() {
   //add ketchup class to field

   //name
   $('#form_3 input#element_2_1').addClass("validate(required)");
   $('#form_3 input#element_2_2').addClass("validate(required)");
   $('#form_3 input#element_2_3').addClass("validate(required)");
   $('#form_3 input#element_2_4').addClass("validate(required)");

   //phone
   $('#form_3 input#element_1_1').addClass("validate(required)");
   $('#form_3 input#element_1_2').addClass("validate(required)");
   $('#form_3 input#element_1_3').addClass("validate(required)");

   //email
   $('#form_3 input#element_3').addClass("aaaaaaaaaaaaaaaaa");

   //city
   $('#form_3 input#element_5').addClass("validate(required)");

   //service
   $('#form_3 input#element_4').addClass("validate(required)");

   $('#form_3').ketchup();

   });
   </script>

   Posted 13 years ago #

2. samerbazzi
   Member

   Can anyone help on this :( its the final task I have for my project...

   Posted 13 years ago #

RSS feed for this topic

Reply

You must log in to post.