I am developing an app in which I am using HTML5 fields in my form. I want to trigger html5 field validation on button click for this purpose I have written this code
<input type="button" id="btnContactSubmit" class="btn btn-success" value="Submit">
$('#btnContactSubmit').click(function (e) {
if ($('#aspnetForm')[0].checkValidity()) {
e.preventDefault();
if (flag) {
createListItem();
}
} else {
e.preventDefault();
}
});
button click is working fine but it doesnot showing error message on relevant field I want to show error message without submitting my form.
There is no way to trigger the native tooltips other than submitting the form.
If the form is valid, prevent it from submitting, and if it's not valid, just submit it, and the native HTML5 validation will happen, but the form won't be submitted anyway.
You are preventing the default action in both conditions, so the validation never happens, do it like this, and it will
$('#btnContactSubmit').click(function (e) {
if ($('#aspnetForm')[0].checkValidity()) {
e.preventDefault();
if (flag) {
createListItem();
}
}
});
FIDDLE
Related
As described in the title, I have the problem that I have two forms on one page. Is it possible to use a single captcha for both forms? And what about html5 form validation? I tried using the grecaptcha functions, but it didnt work. It never reaches the formSubmit() function.
I have this div in each of the forms:
<div class="g-recaptcha"
data-sitekey="6LeR9zEUAAAAACWWgcVtTs6JFvE0d9c2UNheIrtn"
data-size="invisible"
data-callback="formSubmit">
</div>
The code to prevent the default of the submit button:
$('###sFormId#').submit(function(event) {
if (!grecaptcha.getResponse()) {
event.preventDefault();
grecaptcha.execute();
grecaptcha.reset();
} else {
console.log('form submitted');
}
});
The function to submit:
function formSubmit(response) {
console.log('submit function');
document.getElementById("#sFormId#").submit();
}
I have the following jsp:
...
<script type="text/javascript">
$(function() {
// prevent multiple submissions
$('#saveCallListBtn').one("click", function() {
$('#callListForm').submit();
});
});
...
</script>
...
<form:form id="callListForm" commandName="callList" action="${contextPath}/calllist/save" method="POST" htmlEscape="true">
...
<td colspan="2" style="text-align: center">
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
</td>
...
</form:form>
The behavior I am looking for is to only all the form to be submitted once no matter how many times the save button is clicked. Using the jQuery .one function, I can get the above code to correctly work. As the form will submit multiple times if I click more than once.
The following code will work fine:
$('#saveCallListBtn').on("click", function() {
$(this).prop("disabled", true);
$('#callListForm').submit();
});
But I am interested to know what I am doing wrong with the .one function.
Note the type here:
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
A submit button in a form will submit the form, no JavaScript required. So when your handler is automatically removed, on the next click the default handling (submitting the form) occurs, courtesy of the browser.
The only reason you're not seeing the form submitted twice on first click, I suspect, is that the act of submitting the form begins the process of tearing down the page to make room for the result of the submission.
FWIW, I would suggest that you not have a click handler on the button, but rather a submit handler on the form that, if all is well and it's going to allow submission to occur, disables the button and sets a flag to prevent future form submission, since forms can be submitted in multiple ways. (On some forms, pressing Enter in a text field will do it, for instance.)
E.g.:
$("#callListForm").on("submit", function(e) {
var $btn = $("#saveCallListBtn");
var valid = !$btn.prop("disabled");
if (valid) {
// ...do any other validity checks you may want, set `valid` to false
// if problems encountered...
}
if (valid) {
$btn.prop("disabled", true);
} else {
e.preventDefault();
}
});
The jQuery one function will execute the event handler only once. However, the default behaviour of the element clicked will execute indefinitely.
Change the type of the button to button, such that it has no default behaviour:
<input id="saveCallListBtn" type="button" value="Save" class="button-med"/>
I noticed one pecular thing. When there are several submit buttons in your HTML form like so:
<button type="submit" name="submit_button", value="b1"></button>
<button type="submit" name="submit_button", value="b2"></button>
<button type="submit" name="submit_button", value="b2"></button>
..and you do this:
var $form = $('#my_html_form');
$form.submit(function() {
if (!checkPassed && !hasRequiredValue) {
bootbox.confirm('Are you sure that you don\'t need <strong>{requiredValue}</strong> parameter?', function(result) {
if (result) {
checkPassed = true;
$form.submit();
}
});
return false;
}
});
the field submit_button does not get submitted at all, it's just not present in the request data.
Would there be a way to force JS to submit data together with the value of the submit button clicked?
I will only add that if the form is submited with PHP and not JS, the submit_button field is present and has the value of b1, b2, or b3 - depending on which button was clicked.
P.S. I just thought that the source of the problem might be that I'm using <button> instead of <input>. However, as I said, it's all good with PHP.
Only a successful submit button will be included in the form data.
A successful submit button is one that is used to submit the form.
Your JavaScript runs on the submit event and:
Always cancels the submission of the form
Sometimes submits the form with JS
Since you are submitting the form with JS instead of the submit button, none of the submit buttons are successful.
Change your JS so that it:
Sometimes cancels the submission of the form
Such:
$form.submit(function() {
// Add a NOT condition here
if (!<someCondition>) {
return false;
}
return true;
});
Regarding the update:
OK, so you are always canceling the submission, and using a DOM based widget to ask for confirmation.
In that case, you need to capture the value of the submit button separately.
The information isn't exposed to the submit event so you need to do it on the click event of the submit button.
Add a hidden input to your form:
<input type="hidden" name="submit_button">
Then add another event handler:
$form.on("click", '[name="submit_button"]', function (event) {
$form.find('[type="hidden"][name="submit_button"]').val(
$(this).val()
);
});
Yes you can get the value of the button
$('button').click(function(event) {
var button = $(this).data('clicked', $(event.target));
var value = button.val();
});
Here you go.
$("button[name=submit_button]").click(function() {
alert($(this).val());
});
Fiddle: http://jsfiddle.net/tw698hvs/
I've got the following problem:
I use bootstrap form to take input from users, and I use jQuery preventDefault() to disable the submit button from sending the form (I use AJAX instead). However, that function also prevents input checking that is done by bootstrap. For example, if someone enters an e-mail without '#' into
<input type="email" class="form-control">
bootstrap would, upon clicking submit, check that input and return a popup with an error.
My question is: how to prevent the request being sent while keeping the bootstrap form checking mechanism intact?
What I have tried: using preventDefault() and writing my own checking script, however this seems like reinventing the wheel and having extra code when it's not needed.
Thank you!
I believe you are talking about the native HTML5 form validation and not validation by bootstrap its self, I have never come across bootstrap validation before. (i may be wrong though).
Most new browsers will validate <input type='email'/> as an email address and <input type='text' required='required'/> as required on form submission.
If for example you are using e.preventDefault(); on the click event on the submit button the form will never attempt to submit and hence the native validation will never happen.
If you want to keep the validation you need to use e.preventDefault(); on the submit event of the form not the click event on the button.
The html...
<form action='' method='post'>
<input type='email' name='email' required='required' placeholder='email'/>
<button type='submit'>Submit</button>
</form>
The jQuery...
//this will stop the click on the button and will not trigger validation as the submit event will never be triggered
$("button").on('click',function(e){
e.preventDefault();
//ajax code here
});
//this will stop the submit of the form but allow the native HTML5 validation (which is what i believe you are after)
$("form").on('submit',function(e){
e.preventDefault();
//ajax code here
});
Anyway hope this helps. If I have misunderstood in any way let me know and ill try to assist further.
I had the same issue, I came to use "stopPropagation" as the way to stop the form submission. But after a little reading on jQuery 3, I realized that "preventDefault" was enough to what I wanted.
This caused the form validation to happen and the submit event didn't proceed.
(This example is of an attempt i had on my own).
$('form').on("submit",function( event ) {
if ( $('#id_inputBox_username').val().length == 0 &&
$('#id_inputBox_password').val().length == 0 ) {
event.preventDefault();
$('#id_inputBox_username').tooltip('show');
$('#id_inputBox_password').tooltip('show');
} else if ( $('#id_inputBox_username').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_username').tooltip('show');
} else if ( $('#id_inputBox_password').val().length == 0 ) {
event.stopPropagation();
$('#id_inputBox_password').tooltip('show');
}
});
I had the same problem and I find this solution:
$('#formulario').on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault(); //prevent submit
$(".imprimir").show();
$(".informacao").fadeOut();
carregardados();
}
})
This question already has answers here:
Disable submit button on form submit
(15 answers)
Closed 2 years ago.
I have added the following script to my layout view, inside my asp.net mvc :-
$(document).ready(function () {
$('.btn.btn-primary').click(function () {
$(this).prop("disabled", true);
if (!$('form').valid()) {
$(this).prop("disabled", false);
return false;
}
});
$('form').change(function () {
$('.btn.btn-primary').prop("disabled", false);
});
The aim of my script is to disable the submit buttons , and re-enable them if the model is not valid or if the user change a form value. The above script will work well on IE & Firefox, but on Chrome I am unable to submit the form , as when the user clicks on the submit button , the button will be disable but the form will not be submitted. Any idea how I can solve this issue on Chrome?
Instead disabling button in button's click event - disable it in form's submit event (you can check form for validity there as well).
This way it will work universally in all browsers.
<form action="http://www.microsoft.com">
<input class="btn-primary" type="submit" value="submit"/>
</form>
$('form').submit(function() {
$('input.btn-primary').prop("disabled", "disabled");
})
I just had the same issue that the Google Chrome was not fireing my submit event when the button got disabled via jQuery.
Background info: I have a form with a button that shall be disabled whenever clicked. So the PHP submit code is not called multiple times. That submit is running on a Drupal Backend, in my case as a custom submit_hook. But for sure working in any other CMS.
But that's not the issue. The real issue is that the Javascript code is disabling the button and Google Chrome thinks that the button is totally dead and not just disabled. So it does not fire any code anymore.
But that issue is pretty easy to fix.
So this code is working on Firefox/IE:
(function($) {
Drupal.behaviors.somebehaviour = {
attach: function(context, settings) {
$('#edit-submit').click(function (e) {
$('#edit-submit').val('Is saved...');
$('#edit-submit').prop('disabled', 'disabled');
});
}
};
})(jQuery);
and getting it running on Chrome as well, you need to add the line:
$(this).parents('form').submit();
so for this example it would finally be:
(function($) {
Drupal.behaviors.somebehaviour = {
attach: function(context, settings) {
$('#edit-submit').click(function (e) {
$('#edit-submit').val('Is saved...');
$('#edit-submit').prop('disabled', 'disabled');
$(this).parents('form').submit();
});
}
};
})(jQuery);