We Keep Coding

Parsley.js, multistep form, skip validation on moving to previous step

Using ASP.NET MVC I've created a multistep form, for the client side validation I've picked Parsley.js, all works fine except when moving to a previous step in the form the validation is getting triggered (which makes perfect sense since the form is being submitted).
My Parsley related code currently looks like this
element.parsley({
trigger: 'change',
successClass: "success",
errorClass: "error",
classHandler: function (el) {
return el.$element.closest('.c-input');
},
errorsWrapper: '<p class="o-col-12"></p>',
errorTemplate: '<span></span>',
});
Where the element is my form.
Is there an easy way of saying to parsley that the validation shouldn't occur when hitting a specific button (can't see anything in the documentation...) or do I need to rework how the validation currently is attached. So only triggering the validation when hitting the next/submit button.
And yes I've looked at the multistep form example they have on the parsley site but that already has all the steps loaded and just toggles those, I need to submit between steps since server side code needs to happen.

I think you're looking for the novalidate attribute:
This Boolean attribute indicates that the form is not to be validated when submitted. If this attribute is not specified (and therefore the form is validated), this default setting can be overridden by a formnovalidate attribute on a or element belonging to the form.
Parsley respects it.

Angularjs forms dynamic validity states of elements

Angularjs 1.3-beta.8
This is a table of inputs, which are embedded in a form that contains other form elements.
This question is in regards to this table only. Here are a few things to keep in mind.
There are no other nested forms, just one master form, which we will call masterForm and contains ALL form elements, not just this table.
Rows are added dynamically to the form using a button you cannot see. Rows can also be deleted by the red circle on the left of the table.
There may be hundreds of rows, or only one; but there must be at least one row.
The only rows that are relevant are the ones that have a payment amount entered.
Each input may have no validation or some validation (dynamically assigned from the server per input).
This means that each individual input will differ and could be this
$scope.masterForm.thisInput.$error = {required: true, format: true, somethingnew: true, etc...}
or it could be nothing as seen in the table picture; only the 'Account Number' and 'Total Due' fields have validation errors.
Question: How can I disregard the input validations in each row input, THAT HAS VALIDATION SET, and only when the 'Payment Amount' is filled in?
The question is a little misleading, as I know how to trigger a state change in Angularjs, however everything I have tried does not change the form validation.
Here is what I have tried -
I did search SO, but did not find an answer that worked in this case.
When the form is submitted, it flags all inputs that do not pass validation. I have hijacked the submit function to first run through the form object and $setValidity state of each "named" input, like so
loop through $scope.masterForm and look for input name fields
When you find the relevant fields of table inputs that have no payment amounts
then run through each input.$error and then input.$setValidity of each
$error (like required: true), set these to false (like required: false) - thanks
This does set each input to valid -
input.$valid (is true)
input.$invalid (is false)
input.$error (are all set to false)
However, all the inputs still show invalid as shown in the table.
There is also the masterForm object which does contain each input name object. In the form object there are also masterForm.$error objects which are the same as the input.$error objects, but just that ALL the form $error objects are gathered together. I have also tried to change these values, which does happen to the inputs I wanted to change, but the form is still invalid.
I have also tried to ng-if each row, meaning I removed them on submit if they didn't meet requirements, but still the form see's them and states the form is still invalid.
Even though I can setValidity for each input, the form does not care. Is this because I have to change the $error state in the form AND the input object? Shouldn't they change state together?
Is this just because I'm using 1.3-beta.8?
Is there an easier way to to this?
Could I have more control using the $validators pipeline available in 1.3-beta.12+?
There is no need for code as I have none that works. If you know how to do this please provide YOUR example.

javascript validation in cakephp says field which isn't required isn't valid

I have a form, one of the inputs of which is:
echo $this->Form->input('email', array('class'=>'formInputRegular halfTd notRequired', 'id'=>'email', 'default'=>'Email'));
The email field of this particular model isn't required. But when I try to submit the form with that input empty the automatic javascript validation appears asking me to enter something.
There is no rule in the model for this field. It's not required in the database. It may once have been (I don't think so) and I've changed it, but I've since re-baked the code for this particular model/controller so that shouldn't be a problem.
Any one any ideas on why the auto javascript validation is kicking in?

It seems to me that it is caused by HTML 5 required attribute. This is a new feature since CakePHP 2.3. Refer to http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html#html5-required
You can turn this off by adding
'novalidate' => true
to the form.

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?

You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');

Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.

The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

What changes to DOM are made when MVC Validation triggers?

I have a form in a modal window that is currently performing some validation.
(I am using ASP.NET MVC, JQuery UI, ajax forms, data annotations and unobtrusive is active)
When this validation triggers I have noticed so far that it does a few things:
1: my validation summary gets it's class changed from .validation-summary-valid to .validation-summary-errors
2: my invalid inputs have a class added to then called .input-validation-error
3: my validation messages get their class changed from .field-validation-valid to .field-validation-error
But there is something else that it is doing and I cant work out how it is tracking this.
I have a textbox that is required, before triggering the validation i can select inside this box, then select another box and the validation will be silent.
But as soon as i trigger the validation by clicking submit with an empty textbox, i can select the textbox and type something to remove the validation instantly, but if i then null it and select a different box this error is re-applied without re-submitting.
So my question is: what has changed, how does it know that I have attempted to submit already?

When validate is called, it adds a class to each input/select that is supposed to be validated. When the input/select is not valid it adds a class to the input/select:
class="input-validation-error"
When it is valid, it adds:
class="valid"
Validation only fires on the control when you change the value, not when it loses focus.
Validation fires on change, even before you submit the form. Take a required textbox, add a value to it, and tab off ... then go back and remove that value, and you should see the textbox highlighted red.