Solved

parsley js

Posted on 2014-09-14
7
955 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript/Java - Changing an image background color 4 54
count download link and run update query 9 55
CSS Scroll Issue 3 81
Example unit tests with AngularJS 3 40
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

914 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

18 Experts available now in Live!

Get 1:1 Help Now