Solved

parsley js

Posted on 2014-09-14
7
938 Views
Last Modified: 2014-09-21
Hi,

i have a group of five cells and i want to use parsley js to validate the form. Essentially i want one of the five cells to be filled out. if not the throw the warning if one or more if filled out them the user can submit the form

i found this article but it is comparing two groups
http://parsleyjs.org/doc/examples/events.html

can someone hep me how to do this

thanks
0
Comment
Question by:M. Jayme Nagy
  • 3
  • 3
7 Comments
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 40322460
<head>
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) {

                // if one of these blocks is not failing do not prevent submission
                // we use here group validation with option force (validate even non required fields)
                if (formInstance.isValid('block1', true) || formInstance.isValid('block2', true) || formInstance.isValid('block3', true) || formInstance.isValid('block4', true) || formInstance.isValid('block5', true)) {
                    $('.invalid-form-error-message').html('');
                    return;
                }
                // else stop form submission
                formInstance.submitEvent.preventDefault();

                // and display a gentle message
                $('.invalid-form-error-message')
      .html("You must correctly fill the fields of at least one of these five blocks!")
      .addClass("filled");
                return;
            });
        });
</script>
</head>
<body>
<form id="demo-form" data-parsley-validate>
  <div class="first">    
    <input type="text" name="name1" data-parsley-range="[4, 20]" data-parsley-group="block1" />
  </div>  
  <div class="second">    
    <input type="text" name="name2" data-parsley-range="[8, 40]" data-parsley-group="block2" />
  </div>
  <div class="third">    
    <input type="text" name="name3" data-parsley-range="[4, 20]" data-parsley-group="block3" />  
  </div> 
  <div class="fourth">    
    <input type="text" name="name4" data-parsley-range="[8, 40]" data-parsley-group="block4" />
  </div>
  <div class="fifth">    
    <input type="text" name="name5" data-parsley-range="[8, 40]" data-parsley-group="block5" />
  </div>


  <div class="invalid-form-error-message"></div>
  <input type="submit" class="btn btn-default validate" />
</form>
</body>

Open in new window

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40322492
Retaining the use of validating the one block, you can do it utilising the data-parsley-validate-if-empty attribute and binding to the form-validation event:

http://jsbin.com/hiciku/5/

$(function() {

	$('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) {


		var flag = false;
		$.each($("input[data-parsley-group=block1]"),function(i,el) {
			if (el.value.length > 0) {
				$('.invalid-form-error-message').html('');
				flag = true;
				return false;
			}
		});

		if (flag) {return;}
		// else stop form submission
		formInstance.submitEvent.preventDefault();

		// and display a gentle message
		$('.invalid-form-error-message')
		.html("You must correctly fill the fields of at least one of these two blocks!")
		.addClass("filled");
		return;
	});

});

Open in new window


<!DOCTYPE html>
<html>
	<head>
		<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
		<script src="http://parsleyjs.org/dist/parsley.min.js"></script>
		<meta charset="utf-8">
		<title>JS Bin</title>
	</head>
	<body>
		<form id="demo-form" data-parsley-validate>
			<div class="first">
				<label for="firstname">Field 1:</label>
				<input type="text" name="field1" data-parsley-group="block1" data-parsley-validate-if-empty />

				<label for="lastname">Field 2:</label>
				<input type="text" name="field2" data-parsley-group="block1" data-parsley-validate-if-empty/>

				<label for="lastname">Field 3:</label>
				<input type="text" name="field3" data-parsley-group="block1" data-parsley-validate-if-empty/>

				<label for="lastname">Field 4:</label>
				<input type="text" name="field4" data-parsley-group="block1" data-parsley-validate-if-empty/>

				<label for="lastname">Field 5:</label>
				<input type="text" name="field5" data-parsley-group="block1" data-parsley-validate-if-empty/>

			</div>
			<div class="invalid-form-error-message"></div>
			<input type="submit" class="btn btn-default validate" />
		</form>
	</body>
</html>

Open in new window

0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40323343
Hi,

is there any way to do it with an inline company such as the one you used for the group?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40323351
Additionally, can we adjust the function to fire on change / keydown
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40323729
is there any way to do it with an inline company such as the one you used for the group?
By inline company do you mean data-parsley-company

I'll have a look about firing on keychange
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
ID: 40323762
yea i believe that is what i mean

thanks
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40323840
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now