Form still submits, trying to use e.preventDefault(); - javascript

So I have this form. I want to check if user has validaty the captcha, but have problems. Here is the form, that checks the function.
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" onsubmit="check_if_capcha_is_filled()">
Here is the function that determines whether doSubmit (the captcha) has been validated.
function check_if_capcha_is_filled(e){
if(doSubmit) return true;
e.preventDefault();
alert('Fill in the capcha!');
return false;
};
But I get an error
Uncaught TypeError: Cannot read property 'preventDefault' of undefined
at check_if_capcha_is_filled
Any pointers to what I am missing? Thank you.

Your e.preventDefault is being used incorrectly. It will do nothing because you're passing an event to a function, you want to attach it to the event handler like this:
$('form').on('submit', function(e)
{
e.preventDefault();
//rest of code
})
this will stop the submit action.
refs: http://api.jquery.com/event.preventDefault/

Is this what you want?
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
Then in your js file:
function check_if_capcha_is_filled(){
if (doSubmit){
return true;
}else{
return false;
}
};
$('#myForm').on('submit', function(e){
if (!check_if_capcha_is_filled){
e.preventDefault();
}
});

You have two issues here. Firstly you need to return the function from the onsubmit event attriubute. Secondly, you're not passing the event in to the function - however this will only work where a global event is available, ie. not Firefox.
To fix the issue, and improve your logic, you can instead use addEventListener() to unobtrusively add the event handler to the element, and remove the outdated on* event attribute. Try this:
var doSubmit = false;
document.getElementById('myForm').addEventListener('submit', function(e) {
if (doSubmit)
return;
e.preventDefault();
alert('Fill in the capcha!');
});
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
<button type="submit">Submit</button>
<form>

Use on event listener
change it to
<form data-id="embedded_signup:form" id="myForm" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup" >
$('form').on('submit', function(e){
// validation code here
if(!valid) {
e.preventDefault();
}
});

Using jQuery and if you want to confirm the submit.
<button name="delete" class="submitbutton">Delete</button>
$('.submitbutton').click(function() {
var buttonpressed;
buttonpressed = $(this).attr('name');
var r = confirm("Please confirm to " + buttonpressed );
if (r == true) {
$('#yourformid').submit();
} else {
return (false);
}
});

Related

Can you call checkValidity() on a <form> element?

I was looking through the Constraint Validation API and found some example code online that seemed to call checkValidity() on <form> elements:
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
But I tried to do this myself and it didn't work. I couldn't find any reference to this being possible anywhere else either. As far as I figured, it can't be called on <form>. Could someone help me out?
You are using submit , but if you are using input there is no submit event for it. You can use input or paste event handler for input
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('input', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
<form>
<input type='email' class='needs-validation'>
<button type='submit'>Submit</button>
</form>
Actually there are many ways to dot this.
It seems like you have written a self-invoking JS function.
In the other simple way, you can simply write a onsubmit event attribute in tag and write the function name.
e.g.
<form onsubmit="return checkValidity()">
//...rest stuff
</form>
Based on the returned result from the function, whether true or false depending on the conditions the form will get submitted or stop submission respectively.

Do html validation without calling javascript function on submission of form.

I have a form which has a textarea:
<form id="hello">
<textarea id="Testarea" required></textarea>
</form>
<button id="myButton" type="submit" value="Submit">Click me!
</button>
When the user submits the form, I listen to it via a jquery handler:
$("#myButton").click(function () {
alert("blah");
});
However if the textarea is empty, I want an error to be thrown without calling my function. Right now, my function is called even if the textarea is empty.
https://jsfiddle.net/8dtsfqp0/
Use a submit handler on the form, not a click handler on the button.
Here is the order of execution when you click on a submit button:
Button's click handler is called. If it calls event.preventDefault(), the process stops.
The form is submitted, which performs the following steps:
Validate input fields. If any validation fails, the process stops.
Call the form's submit handler. If it calls event.preventDefault(), the process stops.
The form data is sent to the server.
So if you want to prevent your function from being called, it has to be after the "Validate input fields" step. So change your code to:
$("#hello").submit(function () {
//Throw error if textarea is empty
alert("Her");
});
Fiddle
you can try this:
$("#myButton").click(function () {
if($('#Testarea').val().trim().length > 0)
{
return true;
}
else
{
alert("empty text box");
return false;
}
});
<script type="text/javascript">
document.getElementById("myButton").addEventListener("click", myFunction);
var problem_desc = document.getElementById("Testarea");
function myFunction() {
if (problem_desc.value == '') {
alert("blank");
return false;
}
else{
alert("working");
}
}
</script>

How to run a function just before the form post happens?

I have a form which posts some data to the server
<form action="action.html" method="post" id="formComments">
// controls, etc
</form>
<script>
function validateFormJustBeforePost()
{
//
return true;
}
</script>
Just before the form is posted, I'd like to run a script which returns true or false.
If true it should continue with the post, otherwise not (an error message will be shown)
The form post can happen on clicking a button inside or outside (page menu) the form above.
How to achieve that?
I ran the below but it never alerts:
$(document).ready(function(){
$('form').submit( function()
{
alert("Something");
});
});
onsubmit event handler, for example
<form onsubmit="return validateFormJustBeforePost()" ... >
or in <script>:
document.getElementById('formComments').onsubmit = validateFormJustBeforePost;
or, the most proper way
function validateFormJustBeforePost(e){
if( invalid ){
e.preventDefault()
return false;
}
}
document.getElementById('formComments').addEventListener( 'submit', validateFormJustBeforePost);

Using click event while button is disabled

I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});

JQuery on submit show dialog

First sorry for my bad English.
I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.
I tried this:
Layer:
<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
Yes No
</div>
JavaScript:
$(document).ready(function(){
$("#yes").click( function() {
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
$('#confirmwin').show();
return false;
});
});
Sometimes (not always) it looks like it's in an endless loop.
Perhaps the #yes click event's off event goes wrong.
Have you tried removing the .submit() while turning it off?
$("#form").off("submit").submit();
shouldn't it be..
$("#form").off("submit") //if
and only if confirmed proceed to do..
$("#form").submit(); //then you can /off() but I don't see the need to
One solution would be to pass extra parameters while triggering the submit event.
You can read more about event data in the jQuery API here.
$("#yes").click( function() {
$("#form").trigger("submit", [true]);
});
$("#form").on("submit", function(e, blnConfirmed) {
// If it's not confirmed yet, show the overlay.
if (!blnConfirmed) {
$('#confirmwin').show();
return false;
} // else it actually IS confirmed, do a real submit
});
You should test this code first. It's just an example.
It is easy:
Just add an global var:
var ignoreConfirm = false;
so it will look like:
$("#yes").click( function() {
ignoreConfirm = true;
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
if(!ignoreConfirm){
$('#confirmwin').show();
return false;
}
});
simples as this
<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">
//bla bla bla here
</form>
function callJavascriptFunctionConfirm(){
//do the logic here
if (yes)
return true;
else
return false;
}
}

Categories