I doing a bootstrap and javascript form validation. What I am checking is if the form was filled out or not. One the form I left the two radio buttons uncheck, when I submit the form the warning message comes up and says that you must select an option. When I select an option and click on submit it doesn't submit he form. I've implemented the code below and so far the code is showing the warning message that the form wasn't completed.
/****** Checks to see if the form is filled out
****************************************************** */
function validateForm() {
var radios = document.getElementsByClassName(".form-check-input");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked){
formValid = true;
i++;
}
}
if (!formValid){ $("#modalButton").click(function(){
$("#buttonAlert").addClass('show') //Shows Bootstrap alert
});
return formValid;
}
else{
return true;
}
}
what am I doing wrong or missing?
The formValid rule must be within the click event:
function validateForm() {
var radios = document.getElementsByClassName(".form-check-input");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) {
formValid = true;
i++;
}
}
if (!formValid) {
$("#buttonAlert").addClass('show')
return formValid;
} else {
return true;
}
}
Related
I have 2 address entries on my form. I also have 2 radio buttons to designate the "preferred" mailing address.
I'm attempting to validate these 2 and am not really sure if I'm doing it correctly. It seems to work if I have both addresses filled but I can't seem to get it to validate correctly if one of the addresses isn't filled.
Here's the javascript that does the validation:
function checkMailingPrefs() {
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
for (i = 0; i < 2; i++) {
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "") {
$("#" + prefs[i]).prop('checked', false);
$("#MailPrefBusi").validationEngine('showPrompt', 'You must select the correct Mailing Preference', 'error', true);
return false;
}
if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) {
$("#MailPrefBusi").validationEngine({promptPosition : "bottomRight", scroll: true}).validationEngine('showPrompt', 'You must select the correct Mailing Preference', 'error', true);
return false;
}
}
return true;
}
I'm using jQueryValidationEngine but it also doesn't correctly validate them. I only use it to show the validation error for these fields.
Here is the criteria:
If the MailPrefBusi is checked, then the BusinessAddress1 must be filled in.
If the MailPrefHome is checked, then the HomeAddress1 must be filled in.
If no MailPrefxxx is checked, show error. If no xxxAddress1 is filled, Show error.
It looks like your second if statement if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) { is returning false when you don't want it to. You should be able to accomplish what you want using this:
function checkMailingPrefs() {
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
for (i = 0; i < 2; i++) {
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "") {
// enhanced validation function call here
return false;
}
}
//if the user hasnt checked anything, you can remove this if the form should validate without the user having to set a radio button
if(!$("#MailPrefBusi, #MailPrefHome").is(":checked")) {
// enhanced validation function call here
return false
}
return true;
}
You can see it working at this JS Fiddle: https://jsfiddle.net/h0vj9r35/
Hope that helps!
If you are trying to figure out whether the corresponding fields are filled based on checkbox values in a scenario where you have n no. of checkboxes and fields and would like to avoid hardcoding of values, you may use the following:
var prefs = ["MailPrefHome", "MailPrefBusi"];
var field = ["HomeAddress1", "BusinessAddress1"];
var allEmpty = false;
var valueError = ""
for (i = 0; i < 2; i++)
{
if ($("#"+field[i]).val() == "" || !$("#"+prefs[i]).is(":checked")) {
if(!$("#"+prefs[i]).is(":checked"))
valueError += prefs[i] + "," ;
else if($("#"+field[i]).val() == "")
valueError += field[i];
allEmpty = true;
}
if ($("#"+prefs[i]).is(":checked") && $("#"+field[i]).val() == "")
{
$("#" + prefs[i]).prop('checked', false);
allEmpty = false;
alert("Need to enter " + field[i]);
return false;
}
if((i == 1) && allEmpty)
{
alert("You need to select " + valueError);
return false;
}
}
return true;
http://jsfiddle.net/n0303qd6/1/
Here, i am getting the problem to change the fields border color (after validation message) to its (up on filling the text-input) original color.
It is coming like as when i press the next button all the fields color changed to red. Up on filling the field i want to remove this color to white.
Next:- I have to show the error message with the border color also.
e.g. for all fields there should be message like (Incomplete).
if(oldIndex==0)
{
var $emailv = document.getElementById('user_email').value;
var $passwordd = document.getElementById('chatinput2').value;
var $cpassw = document.getElementById('chatinput3').value;
var fields = document.getElementsByClassName("vikass");
if($emailv=="" && $passwordd == "" && $cpassw == "")
{
for(var i = 0; i < fields.length; i++)
{
if(fields[i].value="" )
{
fields[i].style.border="2px solid red";
}
else
{
fields[i].style.border="";
}
}
}
else if($emailv=="")
{
document.getElementById('status').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Email";
}
else if($passwordd==""){
document.getElementById('user_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Password";
}
else if(cpassw=""){
document.getElementById('u_c_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Please Enter the Confirm Password";
}
else if($passwordd != $cpassw){
document.getElementById('u_c_pass').innerHTML="<img src='/APPEX/appex/wp-content/themes/jobs/images/incorrect_icon.png'> Password don not match";
}
else{
if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
{
var anchor = getStepAnchor(wizard, index),
parent = anchor.parent(),
isDisabled = parent.hasClass("disabled");
// Enable the step to make the anchor clickable!
parent._enableAria();
anchor.click();
// An error occured
if (oldIndex === state.currentIndex && isDisabled)
{
// Disable the step again if current index has not changed; prevents click action.
parent._enableAria(false);
return false;
}
return true;
}
return false;
}
}
I want to do form.submit() but only if all form items with the required attribute are full.
I was thinking on simpy iterating through the form children in search for the attribute, but I'm not sure how to do it since there might be nested elements and such. And probably there is an easier way to do it.
this.form_is_full = function(form){
for (var i = 0; i < form.elements.length; i++){
if(form.elements[i].getAttribute("required") && form.elements[i].value=="")
{
// If has attribute required and is blank return false
}
}
return true;
}
How can I do this?
function Validate()
{
// create array containing textbox elements
//for example:
var inputs = [document.getElementById('fname'),
document.getElementById('lname'), document.getElementById('email'),
document.getElementById('messagetxt')];
var error;
for(var i = 0; i<inputs.length; i++)
// loop through each element to see if value is empty
{
if(inputs[i].value == '')
{
error = 'Please complete all fields.';
alert(error);
return false;
}
}
}
Try this:
$('#YourFormId').submit(function(e) {
if ($.trim($("#YourFormId input").val()) === "") {
e.preventDefault();
alert('you did not fill out one of the fields');
}
});
This is what I did:
this.validate_form = function(form){
for (var i = 0; i < form.elements.length; i++){
if(form.elements[i].value == "" && form.elements[i].getAttribute("name") && form.elements[i].hasAttribute("required"))
{
return false;
}
}
return true;
}
I am using following code to detect whether the check box inside my gridview template field is checked or not. If none of the check box is selected then I want to show alert message.
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked === false) {
chekSelect = true;
return true;
}
}
if (chekSelect === true) {
return true;
}
else {
alert('Please Check Atleast one record to print cheque!!!');
return false;
}
}
}
But with this code when I click on my button its showing me error message for one time even if one or more check box is checked. What I am doing wrong here. Can anyone help me please.
Your logic is slightly off. Corrected version:
jsFiddle demo
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
var chekSelect = false;
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox") {
if (myElement.checked) {
chekSelect = true;
break;
}
}
}
if(!chekSelect) {
alert('Please Check Atleast one record to print cheque!!!');
return false;
} else {
return true;
}
}
I've changed the .checked test, to test for it being true not false, because you want to know if at least one checkbox is checked. I also added a break, and moved the alert to outside of the for, because you won't know if there is a checkbox checked until the for completes.
Try this
function findCheckBox() {
var inputElements = document.getElementsByTagName('input');
for (var i = 0; i < inputElements.length; i++) {
var myElement = inputElements[i];
if (myElement.type === "checkbox" && myElement.checked) {
return true;
}
}
alert('Please Check Atleast one record to print cheque!!!');
return false;
}
Using JQuery:
var checked = false;
$('input:checkbox').each(function(){
if($(this).prop('checked')){
checked = true;
break;
}
});
if(!checked) alert('Please Check At least one record to print cheque!!!')
I am having trouble validation a form and staying on the same page. Below is my javascript validation which is working as i get popups.
function valueChecks(input){
var reqdFields = false;
var ncFields = false;
var catCheck = false;
var refCheck = false;
var dtCheck = false;
var retval = false;
reqdFields = checkRequiredFields(input) ;
ncFields = checkNonComplianceFields(input);
catCheck = checkCat();
refCheck = checkRef();
dtCheck = subDate();
var mesgNo="0";
if (reqdFields == true){
mesgNo="0";
} else { mesgNo="1";
}
if (catCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"2";
}
if (refCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"3";
}
if (dtCheck == true){
mesgNo=mesgNo+"0";
} else { mesgNo=mesgNo+"4";
}
if (ncFields == true){
mesgNo=mesgNo+"0";
} else {mesgNo=mesgNo+"5";
}
if (mesgNo =="00000"){
retval=true;
}
else if ((mesgNo =="10000")||(mesgNo =="12000")||(mesgNo =="12300")||(mesgNo =="12340")||(mesgNo =="12345")||(mesgNo =="10300")||(mesgNo =="10340")||(mesgNo =="10040")){
retval = false;
alert("Please check that you have filled in all the Mandatory Fields");
}
else if ((mesgNo =="02000")||(mesgNo =="02300")||(mesgNo =="02040")||(mesgNo =="02340")||(mesgNo =="02345")){
retval = false;
}
else if ((mesgNo =="00300")||(mesgNo =="00340")||(mesgNo =="00345")){
retval = false;
alert ("Please enter at least one Reference Value (File Number, STT or BL Number)");
}
else if ((mesgNo =="0004")||(mesgNo =="00045")){
retval = false;
alert ("The Incident Date must be less than or equal today's Date");
}
else if ((mesgNo =="0005")){
retval = false;
alert ("Please enter at least one Non Conforming Party");
}
return retval;
}
And this is how i declare my form.
<html:form action="/qaeditsrl" onsubmit="return valueChecks(this);" >
<input type=submit value="Submit" name="method" >
Can someone tell me why this is going wrong?
Try changing the submit button to input type=button.
Remove the onsubmit on the form, and add an id.
Then add onclick on the button doing all the checks,
if no errors were found use document.getElementById('formId').submit() for submitting;