jQuery Forum

the link to the plugin src is not working

Atte.

Jose Luis Oronoz Troconis
Email: jloronoz@openidea.com.ve
Sitio Web: http://www.openidea.com.ve
Isla de Margarita, Venezuela

maybe this plugin isn't so very much appropriate for mobile use since it only validates on blur. on a mobile device I could effortlessly skip a few inputs edit one further down the page while those no more visible in the viewport get a hint.

On small screens I might not be able to understand why the furm doesn't submit. by means of usability a rather use validation the other way around ... I let user know if they filled out the input correctly instead of throwing errors :)

Hi thanks for replying, if I have seen that it can be a bit annoying since the bubble is a big message but can be modified by css, or use a different style of validation provided by the plugin, I like and have implemented JQM as well as use in my development and it is very useful, I think changing the css and adapted a little to the mobile plugin you can get good results.

Greetings and blessings :)

Atte.

Jose Luis Oronoz Troconis
Email: jloronoz@openidea.com.ve
Sitio Web: http://www.openidea.com.ve
Isla de Margarita, Venezuela

Hi jloronoz,

Thanks for your contribution! I already use this validation script in my web sites but can't make it work in my mobile one...

I know it works cause i checked my page without the # in the url:

mydomain.com/mobile/contact.php => works like a charm
mydomain.com/mobile/#contact.php => doesn't...

I tried with 1.02a and the latest from Github.

Do you know what could be the problem ??? Half a day on it and didn't found a solution...

Thanks for your feedbacks.

Best,

Jérôme Labarbe
D:FUZION

Thanks for your answer jloronoz,

I now use alpha pre3, but the problem is the same: no validation and the form datas are sent...

Here's the link. Unfortunatly the site is (and will stay) in french only but you can find the contact form following this:

Entrez sur le site > Contact > form is at the end of the page.

Here's the url : www.sportafterwork.com/mobile

As I said above, it work when using the url without the "#" before contact.php.

Thanks for your help.

Best,

Jérôme Labarbe
D:FUZION

i have tested your contact form datas are sent ...
but why you redirect with a rel="external" at least your contact.php will be stay /contact.php and not /#contact.php
ex:

1. <li><a href="contact.php" tabindex="6" data-transition="slide" rel="external">Contact</a></li>

ps: sympa ton site au passage.

@nathel : I think you need to empty your browser cache as I have no rel="external" linking to contact.php. By the way the "#' is added by JQM. Et merci pour tes compliments !

@jloronoz: I did all that (but i surely missed something). The fact is it works when using www.sportafterwork.com/mobile/contact.php and not with www.sportafterwork.com/mobile/#contact.php (hash added by jqm). Here's my code:

1. <link rel="stylesheet" href="css/jquery.mobile-1.0a3pre.min.css" />
2. <script src="js/jquery-1.4.4.min.js"></script>
3. <script src="js/jquery.mobile-1.0a3pre.min.js" type="text/javascript"></script>
4. <link rel="stylesheet" href="css/validationEngine.jquery.css" />
5. <script type="text/javascript" src="js/jquery.validate.min.js"></script>
6. <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
7. <script src="js/jquery.validationEngine.min.js" type="text/javascript"></script>
8. <script>
9.     $(document).ready(function() {
10.         $("#form").validationEngine({               
11.             failure : function() {}
12.         })
13.     });
14. </script>

and in the body:

1. <form action="form.php" method="post" id="form" name="form">
2.                 <div data-role="fieldcontain" data-theme="c">
3.                     <label for="nom">Nom / prénom :</label>
4.                     <input data-theme="d" type="text" name="nom" id="nom" value="" autocorrect = "on" class="validate[required,custom[noSpecialCaracters],length[0,20]] text-input" />
5.                     <label for="email">Email :</label>
6.                     <input data-theme="d" name="email" id="email" value="" type="email" autocorrect = "on" class="validate[required,custom[email]]text-input" />
7.                     <label for="tel">Téléphone :</label>
8.                     <input data-theme="d" name="tel" id="tel" value="" type="tel" class="required" />
9.                     <label for="message">Message :</label>
10.                     <textarea data-theme="d" cols="40" rows="8" name="message" id="message" autocorrect = "on" class="required"></textarea>
11.                 </div>
12.                 <fieldset class="ui-grid-a">
13.                     <div class="ui-block-a"><button type="reset" data-theme="d">Effacer</button></div>
14.                     <div class="ui-block-b"><button type="submit" data-theme="a">Envoyer</button></div>      
15.                 </fieldset>
16.                
17. </form>

Thanks for your help !

Best,

Jérôme Labarbe
D:FUZION
Http://www.d-fuzion.com

Ok, i managed to make my form validating.

I first linked to my contact page with rel="external". Without it doesn't... and couldn't find a way to make it validate.
Secondly I reduced to the minimum the validation process for a more light weight solution.

You can check at www.sportafterwork.com/mobile/ -> contact page

In the header I used the jquery.validate plugin plus the french localization file:

1. <script src="js/jquery.validate.min.js" type="text/javascript"></script>
2. <script src="js/messages_fr.js" type="text/javascript"></script>
3. <script>
4.     $(document).ready(function() {
5.         $("#form").validate();
6.     });
7. </script>

Here's the form:

1. <form action="form.php" method="post" id="form" name="form">
2.                 <div data-role="fieldcontain" data-theme="c">
3.                     <label for="nom">Nom / prénom :</label>
4.                     <input data-theme="d" type="text" name="nom" id="nom" value="" autocorrect = "on" class="required" />
5.                     <label for="email">Email :</label>
6.                     <input data-theme="d" name="email" id="email" value="" type="email" autocorrect = "on" class="required email" />
7.                     <label for="tel">Téléphone :</label>
8.                     <input data-theme="d" name="tel" id="tel" value="" type="tel" maxlength="10" minlength="10" autocorrect = "on" class="required number" />
9.                     <label for="message">Message :</label>
10.                     <textarea data-theme="d" cols="40" rows="8" name="message" id="message" autocorrect = "on" class="required"></textarea>
11.                 </div>
12.                 <fieldset class="ui-grid-a">
13.                     <div class="ui-block-a"><button type="reset" data-theme="d">Effacer</button></div>
14.                     <div class="ui-block-b"><button type="submit" data-theme="a">Envoyer</button></div>      
15.                 </fieldset>               
16. </form>

The css is also quite simple:

1. /* FORM  */
2. label.error {
3.     color: red;
4.     font-size: 0.8em;
5.     font-weight: bold;
6. }
7. input.error { border: 2px solid red; }

The validation process takes just 27ko more.

I still have 2 problems : I don't know how to clean the form after comming back from the thanks message and i'd like to keep the hashing of JQM without using rel="external"...

Best,

Jérôme Labarbe
D:FUZION
Http://www.d-fuzion.com

Hi Jose,

Thanks for your advises. Unfortunately using ? or folder doesn't work anymore for me with with alphaPre3 JQM (i need to keep this version as it solves many bugs). So i'll keep this 'rel=external' solution for the moment.
I still have the problem of clearing the form after switching back from the 'thanks' page.

I tried several solutions found with or without jquery but none worked.

I thought this simple one could be enough but I maybe miss something:

1. $(document).ready(function() {   
2.         $("#form")[0].reset();
3.     });

I also tried with beforepageshow event but still nothing...

1. $("#contact").live("beforepageshow", function() {
2.         $("#form")[0].reset();
3.     });

Any idea??

Best,

Jérôme Labarbe
D:FUZION
Http://www.d-fuzion.com

Hi

1. <script type="text/javascript">
2.    $(document).ready(function() {
3.   $("#leadform").validationEngine({promptPosition : "centerRight", scroll: false});
4.  });
5.   </script>

is sufficient, but it doesn't fix my problem

Hi russellfeeed 

thank you very much for your input, it's very interesting what you did, thanks :)

Hi,

I am one of the author of this plugin,

Funny that this has been reported, we unfortunately had a bad commit yesterday on github and a broken version was up for 5 hours, this has been corrected, and indeed this *if* was the problem,

In a near futur we will be adding a 2.x stable version to the download packages, we still have an issue with the ajax validation, once this is corrected we will do that

Do not hesitate to add issues in the bug tracker for jquery mobile, we hope to make the form validator the most compatible possible with JQM,

We would also gladly accept a css file optimized for JQM :)

Thanks!

Hi jloronoz,
Thank for creating this plug-in, I've just started to use it with jquery mobile and it seems great. However, I'm having a problem where I validate my form, which is a simple "login" form with a username and password, and the red validation prompts correctly appear (because I purposely left them blank)....then, I click the jquery mobile "back" button (as if the user just wanted to forget about logging in and go back to the previous page), the red validation prompts remain on the pages that I'm going back to, and won't go away. I would think that they would disappear if you went back to previous pages. Is there a specific call I need to make, and where would I make that call to get rid of the prompts? Any help you could give me would be greatly appreciated, and please let me know if more information I could provide would be helpful. Thanks!

here are the includes I have in a seperate header file:
    <script src="../_js/jquery-1.5.min.js"></script>
    <script src="../_js/jquery.mobile-1.0a3.min.js"></script>
    <script src="../_js/jquery.validationEngine-en.js"></script>
    <script src="../_js/jquery.validationEngine.js"></script>
    <link href="../css/validationEngine.jquery.css" rel="stylesheet" type="text/css" /> 


And the main body of code:
<script language="javascript">
$(document).ready (function () {
    $("#login").validationEngine ({
        promptPosition : "topLeft",
        scroll: false,
        failure: function () {}
    });
});
</script>
   
    <div data-role="content">
       
        <form name="login" id="login" method="post" action="login.asp" >
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" class="validate[required,custom[email]]">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" class="validate[required]">
            <input type="hidden" name="action" value="login" />
            <button id="btn_login" type="submit" value="Login" data-theme="b">Login</button>
        </form>
    </div><!-- /content -->