We Keep Coding

jquery validate plugin, validating form fields of only current screen

I am using jquery validate plugin to validate form fields . I am also using jqtree . on click of every child node a section of form is visible to user, which is supposed to be filled with values.For every child there is a form content to be filled. Entire tree content is declared within one form only. I have a button in the form which on click generates json file. I am calling the function below to validate form
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified. But can anyone tell me what has gone wrong in my approach?

The .validate() method does not "validate the form". It only initializes the plugin on the form. .valid() will programmatically trigger a validation test.
Your code:
$("myform").validate();
....
if($("#my-form).valid())
generate the json file
$("myform") - Is that supposed to be an id, class, or name? As you've written it, it's looking for a <myform></myform> element.
$("#myform") // id="myform"
$(".myform") // class="myform"
$("[name='myform']") // name="myform"
Is your form element called myform or my-form? If it's the same <form> element, then the two jQuery selectors would be the same.
$("#my-form) is missing the closing quotation mark.
If the id of the <form> element is "myform", then your code should be...
$("#myform").validate(); // <- initialize the plugin
....
if ($("#myform").valid()) { // <- test the form's validity
// generate the json file
....
}
OP Title: jquery validate plugin, validating form fields of only current screen
Your question does not seem to have anything to do with the title. There is only one form described in your OP, and since this is JavaScript, only the page that's loaded in the browser is relevant. Not sure what you mean by "current screen".
but this is not validating the entire form. suppose I am on childNode1 it validates only form section defined for childNode1. As far as I have understood jquery validate plugin should validate entire form when correct form id is specified.
By default, the plugin will not validate any form fields that are hidden. You would manipulate the ignore option to over-ride this behavior. Setting ignore to [] will tell the plugin to ignore nothing and validate all fields including the hidden ones.

required attribute not working when submitting forms using submit()

So I have input fields in my form like this:
<input name="blotter_entry_nr" type="text" class="form-control" id="arrest"
placeholder="Enter Blotter No." required>
I submitted the form using the following code:
//handle toolbar event
$('#toolbarButton').on('toolbarItemClick',
function (event, buttonClicked) {
var targetBlock = $(event.target).parents('.article') // get article
var buttonClickedID = buttonClicked.id // get the id of the button click
switch (buttonClickedID) {
case 'saveButton':
$( "#case-report-form" ).submit();
break;
case 'menu-remove':
removeArticle(targetBlock)
break;
}
});
//handle form submission
$("#case-report-form").on('submit',(function(e){
e.preventDefault();
var formdata = new FormData(this);
CSR.SubmitForm.submit(formdata);
}));
The problem is, when I dont provide any input on my required fields, the submission still continue. I try to submit the form using a , and the required attributes are working.
Can someone share his/her thoughts regarding this. Thanks.

You are submitting the form via JavaScript, by calling its submit method – and in that case, a possible invalid form state is not supposed to cancel form submission.
HTML5, 4.10.22.3 Form submission algorithm, Step 4:
If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire a simple event named invalid at the form element and then abort these steps.
Since you are using the submit method to submit your form, the submitted from submit() method flag is set, and therefor the rest of this step does not apply – the browser is not supposed to cancel the submission process at this point, even if the form would be in invalid state. (In fact, the browser is not even supposed to run the validation algorithm in this case.)
You can however check the validity of the form via script as well, before you call the submit method – that’s what the checkValidity method is for.
(You might want to check if the browser supports that method though before calling it – otherwise your code will break in browsers that have not implemented this yet.)

Ruling out e.preventDefault(); as the cause, as Jack pointed out in his JSFiddle.
The part about the browser version still stands - check if you're not using one of the unsupported browsers for your tests:
http://www.w3schools.com/tags/att_input_required.asp

Jquery Validation Plugin - Fields still producing errors

I have a checkbox field which determines whether the proceeding client ID field has an attribute of data-validate required:true, or data-validate required:false which drives my forms validation.
<input type="text" name="stID" id="stID" data-validate="required:true" />
Using jquery i can change the requirement in real-time, along with show/hide and add/remove the error classes associated with that field.
$("#input[name='stID']").attr("data-validate","required:false");
var form=$("#standard");
form.validate().resetForm();
The issue lies when someone tries to submit the form, then changes the initial checkbox option (if true, ID isn't required otherwise if false, ID is required).
When this happens, despite the data-validate required:false being set and the error classes being hidden, the validation is still occurring and flagging the stID field.
Does the jquery validator plug in have a cache/array of fields which resulted in errors that it determines on submit and possibly isn't being cleared/reset when the resetForm function on our validation is called?

Found the solution, still needed to clear the data attribute associated with these fields producing errors after changing its requirement. This was done by
$("#stID").removeData();

Parsley.js skip validation on submit?

When I try to submit a form, either via an input[type=submit] or by calling form.submit(), Parsley validates the form and cancels the submission if invalid. Is there any way I can skip that validation since I'm manually calling validate on sections of my form?
Specifically what I'm trying to achieve is submitting partial versions of the form, so I validate a group and only that portion is sent to the server (even if the rest of the form is still not valid).

I you want to cancel Parsley default validation on submit event, you'll have to remove the submit.Parsley binded event on your form.
Doing a $('#yourform').off('submit.Parsley'); should solve your issue.
Best
Edit: For Parsley2, since events names have changed, it should be $('#yourform').off('form:validate');

if you want to skip single element just use :
data-parsley-excluded
Form fields that won't be validated by Parsley. For example, if you
want to add disabled and hidden fields to the existing list, use:
data-parsley-excluded="input[type=button], input[type=submit],
input[type=reset], input[type=hidden], [disabled], :hidden"
but if you want to validate a specific groupd then use:
data-parsley-group
Assign a group to a field for specific group validation. eg:
data-parsley-group="signup". This way, you could only validate a
portion of a form and not all the fields.
source :
http://parsleyjs.org/doc/index.html#psly-usage-form

When running the submit in JS you can do:
$('#yourform').parsley().destroy();
So with jQuery in code, it could look like this:
var $myForm = $('#yourform');
$("#submit-button").on('click',function(e){
e.preventDefault();
$myForm.parsley().destroy();
$myForm.submit();
});

As I answered here, adding formnovalidate to the button seems to work
https://stackoverflow.com/a/74746624/1148163

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.