We Keep Coding

form is not doing submit after calling function return false only one time

I am trying to control form submitting after validating user input
the user must select at least one radio otherwise the form wouldn't submit
the first part is working very fine, if the user haven't select any radio input I call
$('form').submit(function () { return false });
else if he selected something I will call
$('form').submit();
but it is not submitting
function validateSelection() {
var temp = false;
$('.lang-radio > input[type=radio]').each(function () {
if ($(this).is(':checked')) {
temp |= $(this).is(':checked')
};
});
if (temp != 1) {
$('form').submit(function () { return false });
$('.high-light').effect("shake");
}
else {
$('form').submit();
}
}
I am calling the function validateSelection from OnClientClick="validateSelection();"
I am using asp.net webforms

When you do
$('form').submit(function () { return false });
you are attaching an event handler to the submit event. Thus, if this line executes first, then every time you do $('form').submit();, the event handler will be triggered and return false and not submit.
If the .Net control is a submit button, you can simply replace the first line with return false (Edit: and change it to OnClientClick="return validateSelection();"), otherwise you can remove it completely.

1) Remove OnClientClick="validateSelection();" from your form
2) Give class="validateForm" to your form
3) put following js code in you are js
$(document).ready(function(){
$('.validateForm').on('submit',function(){
var ckradio = $(this).find('[type=radio]:checked');
if(ckradio.length == 0){
return false;
}else{
return true;
}
});
});

How to prevent submit but still validate required fields?

I have a form, and when is submitted I prevent it with e.preventDefault(), but I still want the browser to validate the required fields before I make the AJAX call.
I don't want to get fancy with javascript validation, I just want the browser to validate the required fields (HTML5).
How can I achieve this?

It works, even if you don't do the checkValidity check. In chrome, it won't call the submit function on the form if form is not valid:
$(document).ready(function(){
$("#calendar_form").submit(function(e){
e.preventDefault();
calendarDoAjax();
});
function calendarDoAjax(){
var proceed = false;
if( $("#calendar_form")[0].checkValidity ){
if ($("#calendar_form")[0].checkValidity()) {
proceed = true;
}
}else{
proceed = true;
}
if (proceed) {
//Do ajax call
}
}
});

Add this in the end of your submit function:
if (evt && evt.preventDefault) {
evt.preventDefault();
} else if (event) {
event.returnValue = false;
}
return false;
And pass the var evt in your function like this:
function(evt) { /* Your Code */ }

HTML5 form, prevent submission until all all valid elements (checking on focus)

So I found this wee bit of code which basically prevents the form being submitted unless all the HTML 5 form elements return valid. http://jsfiddle.net/JgxU7/
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
forms[i].noValidate = true;
forms[i].addEventListener('submit', function (event) {
//Prevent submission if checkValidity on the form returns false.
if (!event.target.checkValidity()) {
event.preventDefault();
//Implement you own means of displaying error messages to the user here.
}
}, false);
}
What I would like to do now is modify this so it checks the validity of the form on focus. It should still prevent the form from being submitted until they are all valid but modify the submit button appearance until they are all valid.
Wondering if anyone is able to help or give any pointers?
Thanks in advance.
this is what i have come up with, i know its wrote not very well:
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
forms[i].noValidate = true;
forms[i].addEventListener('submit', function (event) {
//Prevent submission if checkValidity on the form returns false.
if (!event.target.checkValidity()) {
event.preventDefault();
//Implement you own means of displaying error messages to the user here.
}
}, false);
}
$('form').each(function (i, form) {
var $form = $(form),
$submit = $('[type=submit]', $form);
$('input, textarea', $form).focus(function(event) {
var valid = form.checkValidity();
// change $submit here based on valid or not
console.log(valid);
return true;
});
});
Sluap

A basic answer would be like this: Add this in the for loop
(function (thisForm) {
forms[i].addEventListener('focus', function(event) {
//Prevent submission if checkValidity on the form returns false.
if (!thisForm.checkValidity()) {
// set the button to not valid
}
else {
// set the button to valid
}
true;
}, true);
}(forms[i]));
However it would soon be more easier to just use jQuery or other JS utility library to do the DOM manipulation and/or event binding: thus
$('form').each(function (i, form) {
var $form = $(form),
$submit = $('[type=submit]', $form);
$form.submit(function (event) {
// Prevent submission if checkValidity on the form returns false.
if (!event.target.checkValidity()) {
event.preventDefault();
//Implement you own means of displaying error messages to the user here.
}
}, false);
$('input, textarea', $form).focus(function(event) {
var valid = form.checkValidity();
// change $submit here based on valid or not
return true;
});
});

How to capture an html form submit with javascript?

Currently I have several text inputs and then a type image submit button. On the submit button I have onmouseover, onmouseout, etc.. This sends those to a javascript function that handles change of images for a hover effect. What I wanna do is submit the form and then do some checking like do passwords match and such. Would I do something with the action attribute of the form tag to submit it to a javascript function?

Firstly I recommend using something like jQuery. It makes the code a lot easier to manage. Here's how you'd do it in jQuery:
$('form').submit(function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});
Here's how you'd do it in pure javascript:
// function to make sure we add the event correctly no matter which browser
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
} else { // No much to do
elem[evnt] = func;
}
}
// get first form on page
var form = document.forms[0];
addEvent('submit', form, function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});

<form onsubmit="return cancel()"><input type="submit" /></form>
<script>
function cancel()
{
//code validation
var validated = false;
if(!validated)return false;
else return true;
}
</script>

Jquery - continue with form submit after validation

I have this code:
kreiraj_korisnika.on('submit', function(){
if(error_count != false) {
kreiraj_korisnika.submit();
} else {
return false;
}
});
How can I continue with form submitting when error_count is true (without AJAX submit)?

You have to use preventDefault() method of event variable to avoid the submit. Try sopmething like:
kreiraj_korisnika.on('submit', function(e) {
if (error_count)
{
// avoid the submit...
e.preventDefault();
// show your erros messages
}
});
If error_countvariable is true, the submit will happen.

Is kreiraj_korisnika actually an jQuery object ?
If you just assigned it to a result of getElementById() it won't work.
In that case:
$(kreiraj_korisnika).on('submit', function(e){
var errorCount = 0;
if(errorCount == 0)
{
this.submit();
}
else
{
alert('Invalid form input !');
e.preventDefault();
}
});
Léon