When I submit the form I am checking the validations. If validation true then I need to show confirmation. Currently, it is not showing. When validation true not shown confirmation, the form is submitted.
here is my js code:
$(document).ready(function () {
$('#reason').keyup(function () {
var val = $('#reason').val();
if (val == null || val == "") {
$('#reason_error').html('Please provide a reason.');
validation = false;
} else {
$('#reason_error').html('');
}
});
});
function finishCancelValidate() {
var validation = true;
var val = $('#reason').val();
if (val == null || val == "") {
$('#reason_error').html('Please provide a reason.');
validation = false;
} else {
$('#reason_error').html('');
}
if (validation) {
//alert('hi');
jQuery.confirm({
text: "Do you want to proceed this ?",
confirm: function () {
console.log("You just confirmed.");
return false;
},
cancel: function () {
console.log("You just cancel.");
}
});
} else {
return validation;
}
}
this is form tag :
<form method="post" class="register" action="finishController.php?a=cancel" name="cancel" onsubmit="return finishCancelValidate();" enctype="multipart/form-data">
Related
i have success implemented jquery SmartWizard for validate input type text, but when input text load from ajax the validate is not working.
code to validate:
// Toolbar extra buttons
var btnFinish = $('<button></button>').text('Simpan')
.addClass('btn btn-info')
.on('click', function() {
if( !$(this).hasClass('disabled')) {
var elmForm = $("#myForm");
if(elmForm){
elmForm.validator('validate');
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0) {
alert('Oops we still have error in the form');
return false;
} else {
alert('Great! we are ready to submit form');
elmForm.submit();
return false;
}
}
}
});
How do i validate the input?
i use this code, it work.
var btnFinish = $('<button></button>').text('Finish')
.addClass('btn btn-finish')
.on('click', function(){
if( !$(this).hasClass('disabled')){
var elmForm = $("#myForm");
if(elmForm){
elmForm.validator('validate');
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length >0){
alert('Oops, sorry');
return false;
} else {
alert('work! ');
elmForm.submit();
return false;
}
}
}
});
I got a quick question, on my javascript code I've this:
$('form').submit( function (e) {
var form = $(this);
console.log('submit attempt');
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
if($(this).hasClass('numeric')) {
if(isNumber($(this).val())) {
$(form).submit();
}
}
else {
$(form).submit();
}
}
else {
e.preventDefault();
$(this).css('border','1px solid red');
}
});
});
And on console log I got over 1300 messages of 'submit attempt' then an error:
Uncaught RangeError: Maximum call stack size exceeded
Do you guys have any idea why this happens and how to solve it? Maybe some tricky thing about submit() I forgot about ?
If needed more informations please tell me.
Thank you!
If there isn't an error, the form gets submitted with every input or textarea.
So, first loop the fields, define if there is a failure. If not, send it:
$('form').submit(function(e) {
var form = $(this);
var failure = false;
console.log('submit attempt');
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '')) {
failure = true;
$(this).css('border', '1px solid red');
}
if ($(this).hasClass('numeric') && !isNumber($(this).val())) {
failure = true;
$(this).css('border', '1px solid red');
}
});
if (failure) {
e.preventDefault();
}
});
The problem is that you are submitting the form again within a submit calling it recursively. This is how you should do it. if validation fails isValid contains false and stops form from submitting;
$('form').submit(function(e){
var isValid = true;
$('input, select, textarea').each(function() {
var attr = $(this).attr('required');
if (typeof attr == typeof undefined || attr == false || (attr = 'Y' && $(this).val() != '') ) {
if($(this).hasClass('numeric')) {
if(!isNumber($(this).val())) {
isValid = false;
return isValid;
} else {
e.preventDefault();
$(this).css('border','1px solid red');
}
}
}
else {
e.preventDefault();
$(this).css('border','1px solid red');
isValid = false;
return isValid;
}
});
return isValid;
});
function validateForm() {
if ($('#date').val() == "") {
$('#date').css("border","1px solid #FF0000");
$('#date').focus();
return false;
}
else if ($('#time').val() == "") {
$('#time').css("border","1px solid #FF0000");
$('#time').focus();
return false
}
else if ($('#date').val() != "" && $('#time').val() != "") {
var send = $.post("appointment.php",{
package : $('#package').val(),
first_name : $('#first_name').val(),
last_name : $('#last_name').val(),
tel : $('#tel').val(),
email : $('#email').val(),
date : $('#date').val(),
time : $('#time').val(),
});
send.success(function (result) {
if (result == 'TRUE') {
return true;
}
else if (result == 'FALSE') {
return false;
}
});
send.error(function () {
alert("ajax error");
return false;
});
}
else {
return true;
}
}
<form name="step2" id="step2" action="./step3.php" onSubmit="return validateForm();" method="post">
...
</form>
Even when everything return false; still continue step3.php page. I had tried so many time, same result.
My appointment.php only return echo "TRUE" or "FALSE".
Any idea what's wrong in my coding?
Thank you.
This issue is because validateForm does not wait for your asynchronous call ($.post) to complete before returning.
one way of achieving what you are looking for is to always return false. then on success, submit manually which does not call the onSubmit function.
function validateForm() {
if ($('#date').val() == "") {
$('#date').css("border", "1px solid #FF0000");
$('#date').focus();
} else if ($('#time').val() == "") {
$('#time').css("border", "1px solid #FF0000");
$('#time').focus();
} else {
var send = $.post("appointment.php", {
package: $('#package').val(),
first_name: $('#first_name').val(),
last_name: $('#last_name').val(),
tel: $('#tel').val(),
email: $('#email').val(),
date: $('#date').val(),
time: $('#time').val(),
});
send.success(function(result) {
if (result == 'TRUE') {
$('#step2').get(0).submit();
}
});
}
return false;
}
I have the following form:
<form name="survey1" action="add5up.php" method="post" onsubmit="return validateForm()">
<div id="question">Q1) My programme meets my expectations</div><br />
Always<INPUT TYPE = 'Radio' Name ='q1' value= 'a'>
Usually<INPUT TYPE = 'Radio' Name ='q1' value= 'b'>
Rarely<INPUT TYPE = 'Radio' Name ='q1' value= 'c'>
Never<INPUT TYPE = 'Radio' Name ='q1' value= 'd'>
<input type="submit" value="addData" />
</form>
I am trying to validate whether a Radio button has been selected.
The code I am using:
<script type="text/javascript">
function validateForm()
{
if( document.forms["survey1"]["q1"].checked)
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
This is not working. Any ideas?
When using radiobuttons you have to go through to check if any of them is checked, because javascript threats them as an array:
<script type="text/javascript">
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
function validateForm()
{
if(validateRadio (document.forms["survey1"]["q1"]))
{
return true;
}
else
{
alert('Please answer all questions');
return false;
}
}
</script>
Regards
My solution for validation complex forms include radios.
Usage is simple, function return TRUE/FALSE after validation.
var rs_target is ID of form
scTo is my custom func to scroll to ID, you can use own function to show/scroll errors
scTo("#"+err_target);
Error box will be like
<div class="rq_message_box rq_message_box_firstname display-none">err message</div>
Validation
var validation = validateForm(rs_target);
if(validation == false){
return false;
}
Function
function validateForm(rs_target) {
var radio_arr = [];
var my_form = $("#"+rs_target);
my_form = my_form[0];
$(".rq_message_box").hide(); //clear all errors
//console.log(my_form);
var err = false;
var err_target = "";
for (key in my_form) {
//console.log("do");
if(!my_form[key]||my_form[key]==null||err){
break;
}
//console.log(my_form[key].name);
var x = my_form[key].value;
//console.log(x);
if(my_form[key].type == "radio"){
//console.log("radio");
if(radio_arr[my_form[key].name] != true){
radio_arr[my_form[key].name] = null;
}
if(my_form[key].checked){
radio_arr[my_form[key].name] = true;
}
}else{
if (x == null || x == "") {
//console.log(form[key].name.toString() + " must be filled out");
err = true;
err_target = my_form[key].name;
//return false;
}
}
}
//console.log(radio_arr);
var rad_err = false;
for (key in radio_arr) {
if(rad_err){
break;
}
var x = radio_arr[key];
if (x == null || x == "") {
//console.log("RADIO> "+key + " must be filled out");
rad_err = true;
err_target = key;
}
}
if(err || rad_err){
// some error stuff, for me show prepared error/help box with class [".rq_message_box_"+err_target] / err_target is name of input like [.rq_message_box_firsname]
$(".rq_message_box_"+err_target).show(); //show error message for input
scTo("#"+err_target); //scroll to - custom func
return false;
}else{
return true;
}
}
I am trying to validate my form on submit and if the input's are all filled in they submit to register.php
My problem being it only works if all inputs are blank - otherwise it errors - I'm just trying to check if any of those fields are blank before submiting
function submitform() {
if ($('#name, #email, #user, #address, #phone').val().length === 0) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}
You cant do a .val on an array. It should be
function submitform(){
var warning = false;
$('#name, #email, #user, #address, #phone').each(function() {
$(this).val().length === 0){
warning = true;
return;
}
});
if(warning) {
$(this).addClass('warning');
} else {
alert("form submitted");
}
}
you need to check each one of them with the each function in jquery, or a for loop.
$('#name, #email, #user, #address, #phone').each(function(){
if ($(this).val().length === 0){
$(this).addClass('warning');
} else {
alert("form submitted");
}
});
Here's the same example with a for
var formElements = $('#name, #foo');
for (i = 0 ; i < formElements.length ; i++)
{
if ( $(formElements[i]).val().length === 0 )
$(this).addClass('warning');
else {
alert("form submitted");
}
}
function formSubmit() {
var pass = true;
jQuery.each( jQuery('#form :input'), function( key, value ) {
if(!this.value && jQuery(this).attr('class :contains("required")')) {
if (jQuery(this).siblings('.error').length === 0 && jQuery(this).type != 'submit') {
jQuery(this).after('<label class="error"><span class="form-required">*</span> Required</label>');
}
pass = false;
} else {
jQuery(this).siblings('.error').remove();
}
});
if (pass === true) {
document.getElementById('form').submit();
}
}