CODEWITHSUNDEEP
jqueryhtmlpluginsjquery-mobilevalidation
frequent
frequent

Reputation: 28533

how to manually trigger validval plugin for a jquery-mobile form validation?

I'm trying to setup the validval plugin (latest 4.0.0) version and have no luck whatsoever...

Here is what I have in HTML

<form name="LoginForm" id="LoginForm" data-transition="slide" action="somepage.html" method="post">
   // ... text inputs
   <input type="submit" id="CheckLogin" name="CheckLogin" value="Login" data-theme="e" />
</form>

And Jquery:

 // tried pageinit and pageshow
 $('div:jqmData(role="page")').live('pageshow', function() {

   $(this).find('form').each(function() {
      // call once
      if ( $(this).find('.required').length > 0 && $(this).attr('valed') != 'on') {
          // flag and validVal
          $(this).attr('valed', 'on').validVal({
             'validate': {  'onBlur': false },
             'customValidations': {  },
             'form': {
                  'onValid': function( $form, language ) {
                      console.log("form ok");
                      },
                   'onInvalid': function( $form, language ) {   
                      console.log("form not ok");
                      // attach an error to form
                      $(this).attr('error', 'yes');
                      }
                    } 
               }); 
           }
       });

This should set up the form validation on pageshow.

Now I'm binding to the submit button:

  $("#CheckLogin").click( function(event) {
        event.preventDefault();

        // call validval 
        // DOES NOT WORK, cause validval() doesn't fire like this
        var errors = $("#CheckLogin").triggerHandler( "submitForm.vv" );    
        console.log( errors );

        // alternative, check for attached errors
        // DOES NOT WORK, cause validval() doesn't fire on click

        // ... my routine running if there are no errors

        // Submit
        // document.LoginForm.submit() 
        });

The problem is if I bind to submit, the validation works, but the form always is submitted right away, no matter what validval says. So I'm now binding to click and want to fire my routine "by hand". This means I also need to fire validval using the triggerhandler - at least it says to do so on their website. Problem is, validval does not fire like this. And I have no clue why?

Question:
How can I trigger validVal() form validation from inside my click-handler? Or, if I change back to binding to submit, how can I make sure the form does not auto-submit into oblivion?

Hope the info is sufficient & a big Thanks for help!

Upvotes: 1

Views: 917

Answers (1)

frequent
frequent

Reputation: 28533

Ok. Found it myself... always happens after doing a long post on Stackoverflow...

You need to replace triggerhandler with simple trigger, then validval will fire. You can either fire the submitForm event (depreciated in v4.0.0.) or the submitForm.vv event, which seems to be the correct event to call.

Maybe helpful to someone else, too.

Upvotes: 2

Related Questions