Button with name = submit becoming disable while using boot strap validations - javascript

I am facing a very strange issue.
I have a simple form with a text box. I have two buttons of type submit. If I set name = submit on one of those buttons then buttons are becoming disabled when clicked and not getting posted.
Is this the standard behavior in a boot strap or this can be changed?

You should not name any form element "submit" since that will mask/eclipse the JavaScript form.submit() function and it will not be available!
You can address any form field by its name using document["nameOfForm"]["nameOfField"] or document.nameOfForm.nameOfField. There are already form properties like document.myForm.name or methods like document.myForm.submit().
Using names of form properties or methods that are already defined by the browser will interfere with any functionality that depends on them.
Other common field names to avoid:
action
enctype
method
name
target
It appears your JS library of choice is using form.submit() to submit the form.

Do not use the properties of a form, such as submit, reset, length, method to set the name or id attribute of form, field elements. Name conflicts can cause the problem.
For example, you cannot submit the form after validating if use submit to name the Submit button:
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
DOMLint has a complete list of rules to check the markup for these kind of problems.
Reference : the name conflict warning in the official documentation.

Related

Is name attribute required on form elements when using Angular?

I use Angular JS for all form management now. Data for inputs are stored to their associated ngModel, which can be dealt with in the $scope of the controller.
So I have form setups like this:
<form name="addJob" novalidate data-ng-submit="addJob.$valid && addJob(job)">
<input type="text" placeholder="Job Title" data-ng-model="job.title" required />
<textarea placeholder="Brief" data-ng-model="job.brief"></textarea>
<button type="submit" data-ng-disabled="addJob.$invalid">Add Job</button>
</form>
This works absolutely fine in all major browsers (except I haven't tested IE). You'll notice I haven't included name attributes on the input or textarea. Do I need them for any reason? I've read the following before:
Note: Only form elements with a name attribute will have their values passed when submitting a form.
But my data is passed absolutely fine because it's bound to the ngModel. Was is the correct method - include or not include name attributes?
You would need name attribute on the element along with the ng-model in order for the instance to be added to the formController and any validations to happen on the control or on the form. Also if you are submitting a form (action on the form) then only the form elements with name attribute will be submitted to the server. See the native form validation and submission process.
In the ngModelController instance there is a property called $name which is nothing but the name of the element.
ngModelController source
this.$name = $attr.name;
And ng-model directive calls $addControl method on its parent formcontroller instance (if exists), which adds the instance as the value for a key with the name on the formController instance, if you do not have name then it wont be associated and no angular validations can happen.
FormController Source
form.$addControl = function(control) {
// Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
// and not added to the scope. Now we throw an error.
assertNotHasOwnProperty(control.$name, 'input');
controls.push(control);
if (control.$name) {
form[control.$name] = control;
}
So in your case you do not need to have a name if you do not rely on angular form controller validations or not submitting the form with an action.
Name attributes are not required for the functionality which you described because as you have stated, ng-model already binds the data to the controller. However, if you'd like to include validation for your form, the name attribute is necessary to link elements in relation to each other in the ui. Here's a link to the angularjs api documentation for inputs: https://docs.angularjs.org/api/ng/directive/input. at the bottom, you'll see the validation that I'm referring to.
To answer your question simply: No, the name attribute is not required. The only attribute required for an input in Angular is ng-Model in order to link up data to the controller.

validation not being applied when input type button element is clicked

The issue is viewable on the following webpage - http://www.bestcastleintown.co.uk/test/
I am trying to apply various validation rules to the form that features on the web page mentioned above with a jQuery plugin that utilises custom data attributes (http://formvalidator.net/index.html). This validation is present on the first 5 form fields. This is viewable when a user focuses on a field and then progresses to the next field, the previous field will lose focus and a validation message is presented.
I am encountering an issue whereby the validation is not applied when the form is submitted. This is caused by the onclick and type attributes that are present on the <input> element
<input class="btn-wpbc" type="button" onclick="mybooking_submit(this.form,1, 'en_US' );" value="Send">
I have observed that if the type attribute is changed to type="submit" and the onclick attribute is removed in Firebug or Chrome Developer Tools then the validation will be applied to the form fields.
However changing the attributes will in result the failure of calender validation as a booking is being made through an AJAX request that is initialised through the following JavaScript:
onclick="mybooking_submit(this.form,1, 'en_US' );"
The form will no longer check that a day has been selected.
Are there any suggestions for ensuring both forms of validation take effect (calender day selected and validation on form fields)?
change input type attribute to submit and call your javascript function on onsubmit event on form tag. Like-
<form onsubmit="mybooking_submit(this.form,1, 'en_US' );" >

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

How to add a value to a textbox using a submit?

I have two submit buttons namely "Approve" and "Reject". Both of them go to one controller file so I set the controller file on the action tag of the form.
What I want is that when I click Approve, it sets the value of the hidden field named 'Decision' with 'Approved' and when I click 'Reject', the value of the hidden field will be 'Rejected' then the form will continue to submit to the designated controller.
However, the form continues to the controller but the decision field is empty.
Also, when I tried to put an 'alert' on the javascript function, it is not showing everytime I click the submit buttons eventhough I used the onClick tag.
Can someone suggest a working code for this? Thank you. :)
So I believe form actions have precedence over javascript and other stuff like animations.
To answer your question: you can make the submit buttons just normal buttons like so:
<input id='accept-button' type='button' name='accept' value='Accept' />
and add an event listener to it that changes the value of the hidden field when clicked then submits the form:
document.getElementById('accept-button').addEventListener("click", function () {
var hiddenid = document.getElementById('hidden');
var formid = document.getElementById('form-id');
hiddenid.value = 'Accepted';
formid.submit();
});
After a quick search I found a better solution from this question's accepted answer. It uses jquery though.

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)

Categories