Develop Reference

javascript onclick return confirm then submit

I need to confirm delete before submit form using javascript, i tried this code but it didnt work :
Delete

You should confirm first before submitting the form. And you need to set a condition whether it returned true or false
Delete

Submit form only when user confirm it otherwise set return false. So your form will not be submitted.
function confirmdelete() {
if (confirm("Are you sure?")) {
// submit form
}
return false;
}

Please check the comments against the code.
$(function () {
//Attach click event to the link. In this case all links
//You might want to update this, make it more specific by using id or name or class of the a tag
$('a').on('click', function (event) {
//prevent the default action of the tag
event.preventDefault();
//confirm
var conf = confirm('Confirm Delete');
if (conf) {
//you action if true
}
else {
return;
}
});
});

Validating form with JavaScript that is in a separate header

I have a phpwebsite that includes a header and footer on every page. On one of my pages I have a form called "orderForm" and onSubmit is equal to "return(validate())". In my header (which gets included on that page) I have a function called function validate().
My problem is trying to validate the order form from my header file. I know it partly works when my validate function consists of:
alert("Test");
return false;
As I get an alert when I submit the form.
But when I try something like:
if (document.orderForm.postcode.value.length < 1) {
alert("Postcode field cannot be empty.");
return false;
}
It doesn't validate it, despite orderForm and postcode being the correct names of the form fields. Is this because I am including the header file while having the form in a different file?
Cheers

If you want to test by name you can do this, assuming no other onload code in the page. The main point is to wait with assigning the validation until after the form exists on the page.
window.onload=function() {
document.orderForm.onsubmit=function() {
if (this.postcode.value.length < 1) {
alert("Postcode field cannot be empty.");
return false; //cancel submission
}
return true; // allow submission
}
}
To use preventDefault with my code you can try
window.onload=function() {
document.orderForm.onsubmit=function(e) {
var event=e?e:window.event;
if (this.postcode.value.length < 1) {
alert("Postcode field cannot be empty.");
event.preventDefault();
}
}
}

You need to add the «name» attribute in the form and the input tag.
In this scenario you must ensure that the fields are loaded on the page with window.onload.
You can assign a submit event to your form. In this context you can run your script to validate your field.
You must prevent the default action of the form with preventDefault().
This is the solution:
window.onload = function() {
var form = document.getElementById("orderForm");
form.addEventListener("submit", function(e) {
if (document.orderForm.postcode.value.length < 1) {
e.preventDefault(); // This prevents the default action to submit the form to the server.
alert("Postcode field cannot be empty.");
}
});
};
<form id="orderForm" name="orderForm">
<input id="postcode" name="postcode" type="text" />
</form>

jQuery validate submits form twice

I'm using jQuery validator and jQuery 1.8.3. For some reason my form is submitted twice which causes errors. This is the code:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
Any idea why the form is submitting twice? The form button is not an input submit but a <button> element (needed in this case).

Your form is submitted twice because :
you call $('#myForm').submit()
you click on the submit button which also triggers the form event. Note : the , if it is in a form, will also trigger the form event on click
So I think you have to add a return false in your on click method to prevent the form to be submitted when you click on the submit button. Now, only $('#myForm').submit(); will submit the form :
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
I think you also don't need to add this :
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
return false;
});
The validate method will be automatically called when the form is submited.

You don't need to add following code
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
submitHandler code will automatically handles form submit.

I had the same issue:
my goal: validate many forms with the same class:
my php:
form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">
my js:
$('.js-validate-itemForm').each(function () {
$(this).validate({
submitHandler: function (form, event) {
doActionOnItemform(form, event);
return false;
}
});
});

I figure out the reason why this code would submit twice from:
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
return false;
};
someNameSpace.myValidateFunction();
$(document).on('click', '#myFormSubmitButton', function(){
$('#myForm').submit();
});
At first, when u click button in the form, u will call $('#myForm').submit(), and this call event will submit one form; then form event submitHandler:will call ajaxsubmit to submit another form; so u will submit twice forms.
Secondly, to be honest, this code has errors -^_^- and dont understand the jQuery_validate_plugin;
If u know $('#myForm').validate will submit one form, u know the solution--u just delete the button call event and let $('#myForm').validate submit form; So that is the code：
someNameSpace.myValidateFunction = function(){
$('#myForm').validate({
submitHandler: function(){
mySubmitCallBackFunction();
},
});
};
Then done!

Jquery Validation Unvalidated form submit button able to be clicked (With Fiddle)

I have a Jquery form with a validation script on the URL, it correctly validates and invalidates the URL. However, when it invalidates the URL, it still allows the form button to be clicked, but not submitted.
This causes the hidden loading image to show even though the form is no being submitted.
Here is a fiddle with the loader and script
http://jsfiddle.net/mikeef74/gzSDH/16/
var submit_hit = false;
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
if (submit_hit) {
$('#form_container').hide();
$('#mydivhide1, #mydivhide2').show();
$('body').css("background-image", "url(images/previewbg7.jpg)");
$('body').css("overflow-y", "auto");
}
}
});
$("#form_710370").validate();
$('#form_710370').submit(function (e) {
$('#loader1').show();
submit_hit = true;
return true;
});
});

The submit event will trigger whenever you attempt to submit. You've defined a submit event handler tied to the form which is why the image is showing.
Seems you want to trigger the loader image on a conditional submit so you'll need to use the validation's submitHandler. Now the inner function will only trigger when the form is valid -- the loader image will display and the form will be explicitly submitted.
$("#form_710370").validate({
submitHandler: function(form) {
$("#loader1").show();
submit_hit = true;
form.submit();
}
});
// remove this
//$('#form_710370').submit(function (e) { ... }
http://jqueryvalidation.org/documentation/

This is way validate a form in jquery:
$(function() {
$("#form_710370").validate({
rules: {
//
},
messages: {
//
},
submitHandler: function(form) {
form.submit();
}
});
});

Why doesn't my form Submit when I try to submit without using submit button

Below is my code to validate:
$(function () {
function validateform() {
// Code
}
$('#myform').submit(validateform);
});
And on action of this piece I want to submit this
<form id="myform" name="form" action="http://www.google.com">
// Form elements inputs, textarea
<div class="line"><span class="miss">Send Your Message</span>
</form>
Onclick of send your Message, the form should be submitted.

You're not firing the submit method. To fire the method you just need to call it without arguments: $('#myform').submit(). If you use the submit method with argument you're an just registering a event handler.
So you will need to modify your code with this:
$(function () {
function validateform() {
// Code
}
$('#myform').submit(validateform); // This will register an event handler.
$('#myform').submit(); // This will trigger the submit event.
});
Please see the docs for jQuery submit method.
Edits
Mike, if you want to just submit your <form /> via the <span /> you can do it writing this code:
$(function () {
function validateform() {
// Code
}
$('#myform').submit(validateform);
$('span.miss').click(function() {
$('#myform').submit();
});
});

function validateForm() {
if (validation code) {
$('form#myform').submit();
} else {
//display validation errors
return false;
}
}
$(function () {
$('form#myform .miss').click(validateForm);
});

This code works basically and checks for space validation as well
$(function() {
function validate() {
var valid = true;
$(".error").remove();
$(".req").each(function() {
if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0) {
$(this).after("<span class='error'>You should fill this field</span>");
valid = false;
}
});
return valid;
}
$('span.classofspantag').click(function() {
$('#myform').submit(validate);
$('#myform').submit();
});
});