Trying to cancel the sending of an empty form. Confused as there seems to be no reason why this doesnt work. Using firefox as my browser.
Could anybody explain why this code does not cancel the form being sent yet it fires the alert dialog.
addEvent(searchForm, "onsubmit", function(){
if(inputBox.value.trim() === ""){
alert("empty"); //this line gets called
return false; //this doesn't
}
});
Many Thanks
this is the addEvent function
function addEvent(element, listener, func){
if(element.addEventListener){
listener = listener.substr(2, listener.length);
element.addEventListener(listener, func);
} else {
element.attachListener(listener, func);
}
}
your handler should be
function(e){
if(inputBox.value.trim() == ""){
alert('empty');
e.preventDefault();
}
}
Normally regardless of the framework used handlers support passing the event itself as an argument.
addEvent is not a native javascript function.
use this instead..
searchForm.onsubmit = function(e){
if(inputBox.value.trim() === ""){
alert("empty");
e.preventDefault();
return false;
}
}
Related
I have a jQuery event inside a JavaScript function. I've already read that you cannot access the inner function. However, I would like to know how to adjust my code so that the parent function returns true or false depending on the jQuery function.
function validate() {
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
if (input == "") {
return false;
}
});
if(onclickfunction() == true){
return true;
}
else{
return false
}
}
validate();
Or can you recommend a different approach?
Not sure what this code is supposed to do, because calling validate only creates the event listener without actually executing it. But what you can do is to prevent the default action when you need, which is how validation is usually implemented:
$("#button").on('click', function(){
var input = document.forms["formular"]["text"].value;
yourSecondFunction(input !== "");
});
function yourSecondFunction(inputIsValid) {
// Do your magic here
}
I am using the presending event of InboxSDK to check for a condition before sending the email. For the case
selectedProject!==0, email is not getting sent. Does anyone have any comments.
composeView.on('presending', (event) => {
if(selectedProject!==0){
//console.log(selectedProject);
composeView.send();
}else{
console.log(selectedProject);
event.cancel();
console.log('please select a project for the email');
alert('please select a project for the email');
initDropdown();//show the dropdown to select projects
}
From the presending handler if you want to send, you need to end the function by returning, if you call composeView.send(); it gets on a cycle calling the presending handler again.
composeView.on('presending', (event) => {
if(selectedProject !== 0){
return;
} else {
...
event.cancel();
...
}
If you want to send later, you need to set a flag that is checked on the presending event to avoid running it again.
composeView.on('presending', (event) => {
if(myForceSendFlag || selectedProject !== 0){
return;
} else {
...
event.cancel();
...
}
I know it's a bit late, but I hope this helps.
I try to prevent a form submitting, with the following script, but it always does. I have even tried preventDefault() on document load, but it does not work.
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});
$("form").submit(function(e) {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
}
else{
$("span").text("Passwords do not match!").show().fadeOut(1000);
e.preventDefault();
}
});
You need to use preventDefault() to cancel the action. Note the parameter e that I added to the anonymous function call.
My suggestion, or the way I normally go about this is like this:
$("form").submit(function(e) {
e.preventDefault(); // form never fires unless I want it to
if( condition == true ) {
$(this).submit();
} else {
//Don't submit
}
}
Here is a great explanation of why preventDefault() > return false
In order for this to close I think I have found something, but it's absurd at best. My functions work when they are in a $(document).ready. Why? I would be glad to listen to your advice.
$(document).ready(function(){
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});
});
I have a form, and when I submit him I execute multiple script. Here is my code:
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false) { return; }
e.preventDefault();
//many scripts
//How to continue submitting?
}
Is it possible to continue submitting the form (which is stopped with e.preventDefault();) after //many scripts?
Thank you
When you call $("#RequestCreateForm").submit(), the script will just run through the event handler again, and cause an infinite loop (as Koen pointed out in a comment on the accepted answer). So, you need to remove the event handler before submitting:
$("#RequestCreateForm").on('submit', function (e) {
e.preventDefault();
// do some stuff, and if it's okay:
$(this).off('submit').submit();
});
The last line needs to be in a conditional statement, otherwise it'll just always happen, and negate your e.preventDefault(); at the top.
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() === false) {
e.preventDefault();
//form was NOT ok - optionally add some error script in here
return false; //for old browsers
} else{
//form was OK - you can add some pre-send script in here
}
//$(this).submit();
//you don't have to submit manually if you didn't prevent the default event before
}
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false)
{
e.preventDefault();
return false;
}
//other scripts
}
All solutions here are too complicated or lead to javascript error, simpliest and clearest solution I guess:
jQuery("#formid").submit(function(e) {
if( ! (/*check form*/) ){ //notice the "!"
e.preventDefault();
//a bit of your code
} //else do nothing, form will submit
});
$("#RequestCreateForm").submit(function (e) {
if ($("#RequestCreateForm").validate().checkForm() == false) { return; }
e.preventDefault();
//many scripts
// Bypass the jquery form object submit and use the more basic vanilla
// javascript form object submit
$("#RequestCreateForm")[0].submit();
}
To avoid submit loops, an additional variable should be used.
var codeExecuted = false;
$('#RequestCreateForm').submit(function(e) {
...
if(!codeExecuted){
e.preventDefault();
...
functionExecuted = true;
$(this).trigger('submit');
}
});
Here is my approach to avoid the infinite loop.
In the form, I use a "button" with an id (e.g. <input type="button" id="submit" value="submit"/>) to mimic the submit button;
In the script I have something like this:
$('#submit').click(function() {
if(//validation rules is ok)
{
$("#RequestCreateForm").submit(); //assuming the form id is #RequestCreateForm
}
else
{
return false;
}
});
return; is the same thing as e.preventDefault();
try
$("#RequestCreateForm").trigger('submit');
Is there any way to do the following:
validateLogin();
return false;
But actually like this..
validateLogin();
And here is the function:
function validateLogin(){
if(hi=true){
return true;
}
else{
return false
}
I want to attach this function for the event of a form being submitted, so if HI is false - i want to return false; meaning it will stop for form from submitting.. i know return false; will do so i just need to know how i can get this return back to the parent function?
Thanks in advance!
You can use it as follow:
return validateLogin();
however, as mmayo pointed out, don't forget about the return value:
event.returnValue = false;
You can eventually do that:
return validateLogin();
Note that your function code has some errors (maybe due to the simplification of the code you made to post this question?). You'd better write this method like that:
function validateLogin(){
...
return hi;
}
Note also that insted of having if (hi=true) {, you must write if (hi == true) {, or better if (hi) {...
I use the following to stop events...
event.returnValue = false;
cresentfresh inspired me to do some research... here is an article with a compatibility matrix.
There are also related threads on SO.
return validateLogin();
This should do what you want.
The standard way of stoping the default action of an event is:
event. preventDefault();
You may also want to prevent event propagation with event.stopPropgation(); to stop further event listeners from executing.
http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event
However, IE will not recognize this which is why you can set event.returnValue to false for IE.
eg:
if (event && event.preventDefault) event.preventDefault();
event.returnValue = false;
You can also return false from the event handler for events inlined in HTML.
<form onsubmit="return validateLogin()">
This is not considered best practice however.
Note: the event object is passed in as the first argument in your event listener.
eg:
function validateLogin(e) {
e; // is the event object
}
For IE you may need window.event.
function validateLogin(e) {
e = e || window.event; // is the event object
}
Try double == (IF I==5)
validateLogin() Function
function validateLogin() {
return hi;
}
HTML block
<form onsubmit="return validateLogin()">
...
</form>