Can Parsley.js work without a form element?

Question

<form id="f"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input parsley-type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" parsley-trigger="keyup"> </div> </form> <script> $(function(){ $('#f').parsley('validate'); }); </script> 

Instead of a form element, I would like to check the contents in a div element, is this possible?

Answer 1

Parsley simply cannot check the text inside the div / span element. But you can completely check the input not inside the form tag, in your example you could just do $('#exampleInputEmail1').parsley('validate');

Answer 2

I was able to (ab) use the excellent Parsley validator for elements without input, like

 var inputField = $J('<input id="someRandomID" type="text" data-parsley-type="alphanum" data-parsley-required="true" >'); var parsleyHandle = inputField.parsley(); inputField.val(' wronginput!@ #!# !@ #'); console.log(parsleyHandle.isValid()); // should be false inputField.val('correctinput'); console.log(parsleyHandle.isValid()); // should be true 

Obviously, the source of the value can be any - div, span, etc.

Good luck

Answer 3

I had a similar problem. In SharePoint 2013 (at least in the Visual Web Part), adding a form directly to the markup causes grief. SP will “shape” it by adding a huge chunk of generated markup and changing the look. Although there is a way to fix this problem, I would like to quickly add Parsley to a table with a lot of input without playing with the created SP form. My solution was to use jQuery $ .wrap () after rendering the user interface. It works like a charm. Yes, it still uses the form element, but maybe you are avoiding the form for the same reasons. Try JSFiddle

 <div id='container'> <button type="button" id="save">Save</button> <table> <tr> <td><input type='number' min='0' max='999' /></td> ... many more inputs </tr> ... </table> </div> <script ... > $(document).ready(function(){ $("#container").wrap("<form id='fooForm'></form>"); var options = { uiEnabled: true, errorsWrapper: '', excluded: '.inActive' }; // create the validator $("#fooForm").parsley(options); // wire up click event for the save button $("#save").click(function () { // react to form valid state // calling parsley again only returns the // ref to the original, does not duplicate var validator = $("#fooForm").parsley(); validator.validate(); // handle validator.isValid(); // ajax form post or other }); }); </script>