I'm trying to stop the submit if an error exists and go through the submission if no error exist.
This is just a section of the code. Regex works correctly, also the error texts were showing up too. The thing is that now I'm trying to control the submit proccess and due to an error (console is not showing up anything) the error text is not showing up and the submission is just going through even if an input error exists.
There is a mistake that I cannot figure out (No jquery please)
var sub = document.querySelector("#register input[type='submit']");//the submit botton
var err_text_1 = "First name must be filled out!";
sub.onsubmit = function(){
if (first_name == null || first_name == "") {
err_holder_1.innerHTML = err_text_1;
return false;
}
else {
err_holder_1.style.display = "none";
}
}
To prevent submit add event in the function and return false like so:
sub.onsubmit = function (event) {
// Will prevent submit
event.preventDefault();
return false;
};
Also select the form you are submitting not the button itself. So:
var sub = document.getElementById('ActionForm');
Hope this helps.
You need to select the form like
var sub = document.querySelector("#register");//If register is your form id Not input[type='submit']
Related
I have multiple input fields and if three fields showing error then focus goes on the last error field.
How to set focus on the first error field and so on. I tried return false; and it is not working. preventDefault() also not working.
This is my js code for the name field and the rest of the field validation is the same as this name field except validation rules.
if (name.length < 1) {
$('#name_error').text(NAME_ERROR);
$('#name').focus();
error = true;
// return false; not working
} else {
var regEx = /^[A-Za-z ]+$/;
var validName = regEx.test(name);
if (!validName) {
$('#name_error').text(INVALID_NAME_ERROR);
$('#name').focus();
error = true;
// return false; not working
} else {
$('#name_error').text('');
error = false;
}
}
Option 1 - Add class to the fields with error and then you can use below code to focus the first error element.
$('.error-class').first().focus()
Option 2 - Create a variable of top of the function and store the ID of the first error field in that. At the end of the validation rules trigger focus for the element ID stored in a variable.
how to keep validation off if some section of forms not showing during form-filling in jquery. as
function formsubmit(){
var ammount = $('#ammount').val();
var emp_status = $("input[name='empstatus']:checked").val()?$("input[name='empstatus']:checked").val():'undefined';
var com_name = $('#com_name').val();
var ann_inc=$('#ann_inc').val();
var city=$('#city').val();
var emi_paid = $("input[name='emi_paid']:checked").val()?$("input[name='emi_paid']:checked").val():'undefined';
flag = true;
if (ammount.trim()=='') {
$('#msgammount').css('color','red');
$('#msgammount').text('Please Enter Price');
$('#msgammount').show();
return false;
}
if (emp_status == 'undefined') {
$('#msgempstatus').css('color','red');
$('#msgempstatus').text('Please Enter Price');
$('#msgempstatus').show();
return false;
}
if (emi_paid == 'undefined') {
alert('undefined');
return false;
}
}
I want to hide the error emi_paid section as some of the user not going to fill emi_details if they will not took any loan from bank, so i am using radio button if user has any existing loan then only emi option appear,
my code run well the only thing disappoint me to hide the emi_paid error, it will show always at the time of form submission.
Why not use validation js Like validate.js or jQuery.validationEngine v2.6.2.These validation are easy to use as well as these validation has a setting to turn on or off validation for hidden element according to your requirement.
Hidden validation for hidden elements in form submit
$.validator.setDefaults({
ignore: ":hidden"
});
I highly recommend your to use these.
Working on form validation in jQuery. All of my validations seem to be working correctly.
See JSFiddle here.
If you submit the form with no data, all of the correct errors appear.
If you fix one of the fields, the error message for that field does not clear.
I think it probably is something wrong with my logic, but unsure if there is an easy way to try and check the validation again?
My code for submit in jQuery is here. The first four validate functions are checking for errors and displaying errors if there are any. If there are any errors with anything, the form is prevented from submitting. If there is no error, an alert is displayed and the submission is allowed. I know that the problem is that after that first if statement finds an error - there is no way to look and see if the error is fixed and to clear that error. So I'm stumped on where to go with this - would it be better off in a loop maybe?
// On Form Submission Validate Form
$("#contact_submit button").click(function(event){
error_name = validateName();
error_email = validateEmail();
error_activity = validateActivities();
isCreditIssue = validateCredit();
event.preventDefault();
var valid = true;
if ((error_name) || (error_email) || (error_activity) || (isCreditIssue)){
console.log("errors");
valid = false;
} else {
alert('GREAT! form completed');
valid = true;
}
if (valid) {
return;
}
You left out hide statements when the form values become valid at many places. Just an example (inside validateZip):
if ((!errorZip)||(zip!= 5)){
$(".error_zip").show();
errorZip = true;
console.log('zip issue');
} else {
errorZip = false;
}
You should replace it with this:
if ((!errorZip)||(zip!= 5)){
$(".error_zip").show();
errorZip = true;
console.log('zip issue');
} else {
$(".error_zip").hide();
errorZip = false;
}
I have a form with some fields on. I am still learning Javascript. When my is submitted it triggers my JS which checks if the fields was submitted and then displays the errors in a which is done through innerhtml. Problem is it only display's the div for a few seconds and then finishes reloading the page and the div is not displayed anymore.
function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
}
}
You need to add
e.preventDefault();
for avoiding the default behavior.
Hence, if validation fails, the form won't be submitted.
please check whether your using normal HTML input element or ASP.NET server element. If your using Server element like then page will send back to server(reloaded) when click on button. the details you gave above is not enough.
you need to prevent the default behaviour if validation fails
you most likely do the validation on submit sth like:
$('form').submit(function(e){
check = checkradio() // let your function return true or false
if(!check){
e.preventDefault(); // add this to not submit the form
}
});
so the form will not submit if the validation fails
your tweaked validate function could look like this :
function checkradio() {
chosen = ""
len = document.cv.Radio1.length
for (i = 0; (i<2); i++) {
if (document.cv.Radio1[i].checked) {
chosen = document.cv.Radio1[i].value
}
}
if (chosen == "") {
document.getElementById('error-1').innerHTML = "Please choose a type";
document.getElementById("Radio1").focus();
return false;
}else {
return true;
}
}
I am actually processing the validation of a fieldset each time a user press a key:
uname = document.getElementById('user_name');
upass = document.getElementById('password');
btn_submit = document.getElementById('btn_submit');
function verif_champs() {
if(uname.value != "" && upass.value != "")
btn_submit.disabled = false;
else
btn_submit.disabled = true;
}
document.getElementById('fieldset').onkeyup = function() {
verif_champs();
}
The problem is that my form is automatically filled when using Chrome, so my submit button stays disabled even if the content of the fields is not empty. How should I arrange that? I tried the onchange event of the fieldset but it doesn't seem to be thrown by the Chrome's auto completion.
Add an onchange Event for auto complete data.
document.getElementById('fieldset').onchange = function() {
verif_champs();
}