CODEWITHSUNDEEP
jquery-mobile
Cowwws
Cowwws

Reputation: 66

jquerymobile form not working as expected on mobile browsers, but works on desktop browsers?

I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).

The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).

An example of the form can be seen here.

The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.

$('body').delegate('#byEmail_label', 'click tap', (function(event) {
  if (!$("#byEmail").is(":checked")) 
   {    
        $('#req_email').addClass('reqField');
        $('#email').addClass("validate[required,custom[email]]");
  }
  else
   { 
        $('#req_email').removeClass('reqField');
        $('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');   
  }
})
);

I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.

Has anyone experienced something similar, or have any idea how I can get this working?

Thanks

Upvotes: 1

Views: 804

Answers (2)

Cowwws
Cowwws

Reputation: 66

Finally fixed my own problem by moving all my jquery outside the

 $(document).ready(function () {...

and into 

$('*').delegate('body','pagecreate', function(){...

ie:

$('*').delegate('body','pagecreate', function(){
  $('#byEmail_label').tap(function(event) {
    if ($("#byEmail").is(":checked"))
     {
    $('#req_email').addClass('reqField');
    $('#email').addClass("validate[required,custom[email]]");
     }
     else
     {
    $('#req_email').removeClass('reqField');
    $('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
     }
  });
});

Now my head feels better... no more banging it on the desk...

Upvotes: 1

Phill Pafford
Phill Pafford

Reputation: 85298

I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.

alert($('input[name=byEmail]:checked').val());

or

var cb_val = $('input[name=byEmail]:checked').val() == true;

or

var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;

Maybe something like this

var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;

if(addValidation) {    
    $('#req_email').addClass('reqField');
    $('#email').addClass("validate[required,custom[email]]");
} else { 
    $('#req_email').removeClass('reqField');
    $('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');   
}

Upvotes: 0

Related Questions