Idea: form component

[doubletake]

This is a request for a JQueryMobile component to drag into a page. I used the REST Services to submit a form ok. However, I would like to use JQuery.Validate . It requires a form tag. e.g. $('#myform').validate() .

I would be fine if you added form field validation built-in to appery.io services as a alternative.

Thanks,
Don

[maxkatz]

Try using the Panel component to start (and end) a form in a page.

[doubletake]

finally had time to try adding wrapper using appery panels.

1. I added one html panel at start of my form that just contained

2. I added another html panel at the bottom of my form that included the submit button and end form tag.

   RESULT: In element inspector in Chrome, the end form tag got stripped out and moved above the form contents just after the begin form tag.

   Jquery.validate did not work, because the form did not have any contents.

   I guess I'll have to build the entire form externally. But, I really wanted to leverage the REST Services AND do validation.

   Thanks,
   Don

[doubletake]

This JQuery validator doesn't require a form tag
http://validity.thatscaptaintoyou.com...

so it should be a good workaround for now.

Just have to figure out how to invoke my appery.io REST Service only if the form validation is successful.

I'll give this a try. I'm not tied to jquery.validate , if this works.

[Kateryna Grynko]

Don,

Please let us know about the result.

[doubletake]

Validity's non-form tag ajax example works well.

couple minor issues:
1) validation error are to right of input, which is off screen in mobile. Need to figure out how to re-style the error label for mobile.
2) I had to assign a class (form_title) so I can reference the input in Jquery code below ( $('.form_title').require('required');
3) doesn't do inline validation as the user fills out the form. Need to look into calling the validate inputs on change of form fields to see if real-time errors work.

Below is the code

button click ...

if (validateMyAjaxInputs()) {
// invoke my rest update data service
}
else {
// do nothing and see errors in form
}

javascript file

code

function validateMyAjaxInputs() {

Code: Select all

 // Start validation: 
 $.validity.start(); 

 // Validator methods go here: 

 // For instance: 
 $(".form_title").require('required'); 

 // etc. 

 // All of the validator methods have been called: 
 // End the validation session: 
 var result = $.validity.end(); 

 // Return whether it's okay to proceed with the Ajax: 
 return result.valid; 

}
/code

[Tooba Atif]

Hi,
Someone please guide me how can I use Jquery.Validate in my form without using this panel thing.
I was unable to make it work.
Thanks!

[Kateryna Grynko]

Hi Tooba,

You can use any way to validate entered data, for example: http://jqueryvalidation.org/documenta...

[Ala'a Tounsi]

I added Phone number field to the users predefined collection.. I want to validate it?
I used the codes given in the link and the page it self is not working !

[Maryna Brodina]

Hello!

Could you clarify what exactly doesn't work?