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
Related
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.
I've been trying for like 2 hours to get this form validator to work, but I can't..
http://ink.sapo.pt/javascript/Ink.UI.FormValidator.2/#Ink_UI_FormValidator_2-FormValidator_FormElement-FormElement
I mean, form gets validated when I press the submit button, and form posts data only after all fields are correctly.
But what I need is to actually set up the onSuccess callback, so that instead of using method="post", i can a function easily.
You'll need to use the neverSubmit option to do this.
This is a rather obscure option, but it's there in the FormValidator class (you may be looking at the FormElement class, which refers to each input element in a form and takes options such as that input element's label and validation rules.)
I've made a short example based on the official sample.
http://jsbin.com/toruyo/edit?html,console,output
My URL looks like the below format:
http://hostname:8080/search/?N=4294967292&Ntt=abcdef&add=1&Nr=AND(OR(a:abc,a:def,a:ghi),OR(b:abc,b:def,b:ghi));
I am submitting a form through javascript submit. I wanted to hide the Nr parameter value while submit the form.
My piece of code below:
$(".apply-btn").click(function(){
var nr=loadQuery();
var submitUrl = window.location.href;
submitUrl=submitUrl+nr;
$('#myForm').attr('action',submitUrl);
$('#myForm').submit();
});
any help on this..?
You can't.
You are asking the user's browser to send data to a server. The user can inspect that data.
The closest you could come would be to make a POST request instead (by submitting the form with the data in actual form fields instead of generating a custom action via JS). The information would still be visible in the Net tab of the developer tools that come as standard in most browsers these days.
create a hidden field in the form with the name Nr
set the value of the hidden field to the value of nr (instead of appending nr to the URL)
set the method attribute of the form to POST
set the action attribute of the form to the value of window.location.href
submit the form
Well you could use a POST request plus SSL to encryp your requests. As Quentin said, this also would not stop the user from seeing your request with the developers tool bar, but during the submission it is encrypted.
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
I am having trouble validating a long form that is loaded via AJAX after the document is loaded. Using the standard validation syntax, the validator looks for my form in the document before it exists and therefore gives me an error:
$(document).ready(function(){
$("#mainForm").validate();
});
firebug responds with:
nothing selected, can't validate, returning nothing
I tried putting the $("mainForm").validate(); in a function then calling the function with the onSubmit event from the form but no luck:
function validate() {
$("mainForm").validate();
};
----------
<form id="mainForm" onSubmit="validate();">
...
</form>
Thoughts?
Some additional info for #Chris:
I have a page that is dynamically creating a form based on many different modules. The user picks the module(s) that apply to them then the form updates with that information to fill in. So when the user clicks on a link to load a module the loadSection(); function is called. This is what the loadSection(); function looks like:
function loadSection(id, div, size, frame) {
var url = "loadSection.php?id=" + id + "&size=" + size + "$frame=" + frame;
$.get(url,
function(data){
$(div).append(data);
});
}
If I put the `$(#mainForm).validate();' in the callback of this function, it has the potential to get called every time a new module is inserted. Which may be good, or may be bad, I'm not sure how the validation will take to be called multiple times on the same form, even if the fields of the form have changed.
Thoughts?
You've likely got the problem right. If the form doesn't exist in the DOM at document.ready(), then nothing will be bound.
Since you're using JQuery, I presume the form is added using the jquery $.ajax (or similar) function. The most straightforward solution would be just to add $("#mainForm").validate(); to the callback function of the AJAX request. If you're not using JQUery ajax, please post the code that's adding the form, and we can help you out further.
you have to specify the class definition to element as required for it to validate that particular element in the form. But I guess you are not having it anywhere so its showing like that.
for example if you want to validate the email:
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
Simple mistake in selector "mainform" is not a valid selector. Add "#" prefix if it is an ID
EDIT: Also notice you have another validate call inline , remove that one