Right now I have an Input Field (number) that shows a message when the numbers are over 120 or below 135.
//Message on Age
$("#age").keyup(function() {
if ($('#age').val() < 35 || $('#age').val() > 120) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
<!-- AGE -->
<div class="card-2 p-20 hidden">
<div class="bg-white max-width p-20 mb-20">
<h2 style="margin-bottom: 50px;">What is your age?</h2>
<div class="options">
<input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
<span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>
</div>
</div>
<div>
<button type="button" class="btn-previous">
Previous
</button>
<button type="button" class="btn-next">
Next
</button>
</div>
</div>
The issue is that user's still can press the button with the error message on the screen, I want to show the error message when they hit the button or invalidate the button if the age field isn't in range.
Thank you so much to anyone who can help on this!
You can use .prop function to disable your button if the condition matches and enable it if its all good.
Also, you can use $(this) to get the value of your input instead using if using #age id again in your .val().
In addtion you need to add + to your val() to make sure that strings value which are sting initially are converted into integers when checking the if condition.
Live Demo:
$("#age").on('input keyup', function() {
let btn = $('.btn-next')
let errorMsg = $('#errorMsg')
if (+$(this).val() < 35 || +$(this).val() > 120) {
errorMsg.show();
btn.prop('disabled', true)
} else {
errorMsg.hide();
btn.prop('disabled', false)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-2 p-20 hidden">
<div class="bg-white max-width p-20 mb-20">
<h2 style="margin-bottom: 50px;">What is your age?</h2>
<div class="options">
<input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
<span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>
</div>
</div>
<div>
<button type="button" class="btn-previous">
Previous
</button>
<button type="button" class="btn-next">
Next
</button>
</div>
</div>
You can change keyup to change jQuery method and implement sort of controller like this
// Controller
let cont = true;
// Validator
$("#age").on('change', function() {
if ($('#age').val() < 35 || $('#age').val() > 120) {
$('#errorMsg').show();
cont = true;
} else {
$('#errorMsg').hide();
cont = false;
}
});
$(".btn-next").on('click', function(event) {
if(cont) {
// Here do some warning you want
$('#errorMsg').show(function() {
alert($('#errorMsg').text());
});
// ALSO if this button gonna be SUBMIT
// button, you can set here prevent
// default mode like this:
//
//event.preventDefault();
} else {
// Validation ok, continue your logic
// ...
//
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- AGE -->
<div class="card-2 p-20 hidden">
<div class="bg-white max-width p-20 mb-20">
<h2 style="margin-bottom: 50px;">What is your age?</h2>
<div class="options">
<input id="age" name="age" type="number" step="1" min="35" max="120" required="true" class="form-custom">
<span id="errorMsg" style="display:none;">Only policyholders between 35 and 120 years are elegible</span>
</div>
</div>
<div>
<button type="button" class="btn-previous">Previous</button>
<button type="button" class="btn-next">Next</button>
</div>
</div>
Related
I have 4 sliders on my website and would like to change the values of the slide and replace it with text.
$('.slider').on('input', (event) => {
if ($(event.currentTarget).val() === '0') {
$(event.currentTarget).text('test');
} else if (event.currentTarget.value === '1') {
console.log('display')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer mx-4 text-center pb-4 w-50 mx-auto">
<input type="range" min="0" max="3" value="0" class="slider" id="range-bureautique">to be replaced
<div class="display linest" id="score-bureautique"></div>
</div>
</div>
With console.log() I can see that the value is getting equat to 0 or to 1 when i move the slider but the html content is not replaced with my 'test' text ...
Thanks!
This $(event.currentTarget).text('test') will update the text-content of the input-tag. But there is no such thing! Note that there is no end-tag to the input-tag. You should use some tag with id set ideally. Something like this:
<input ...><label id="my_label">to be replaced</label>
Then you use any of this jQuery thing to update the text:
$("#my_label").text('test');
$("#my_label").text($(event.currentTarget).val());
So with an update to the snippet:
$('.slider').on('input', (event) => {
$("#my_label").text($(event.currentTarget).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer mx-4 text-center pb-4 w-50 mx-auto">
<input type="range" min="0" max="3" value="0" class="slider" id="range-bureautique">
<label id="my_label">to be replaced</label>
<div class="display linest" id="score-bureautique"></div>
</div>
</div>
I have an event on google tag manager that should fire when a form is submitted successfully. The form is an embedded code from Cognito Forms. The page is hosted in squarespace. Using Google Tag Manager preview I can see all conditions are met once submissions with the exception of the function below, which should be "true" on successful submission, but for some reason it is false even if I submit form successfully.
What could be going wrong? This is the contact us form and below the function. Thanks a lot.
function areAllFieldsFilled(){
var requiredFields = document.getElementsByClassName('cognito')[0].getElementsByTagName('form')[0].getElementsByTagName('input');
var questions = document.getElementsByClassName('cognito')[0].getElementsByTagName('form')[0].getElementsByTagName('textarea')[0];
var check = 0;
if (questions == '') {
check++;
} else{
for (var i = 0; i < 3; i++) {
if (requiredFields[i].value == '') {
check++;
break;
}
}
}
if (check == 0) {
return true;
} else {
return false;
}
}
I inspected your form and it looks like there are 2 reasons why you are returning false for a filled in form.
As noted by James in the comments, you need to do questions.value == '' and not questions == ''
There is a hidden <input /> tag in the form you probably didn't notice. The value of that input is always empty string because it doesn't have a value. To quickly fix this, you can start your loop at 1. Side Note: the length of your loop should be requiredFields.length -1 (since we are now starting at 1 instead of 0) instead of hard coding 3
Here is a working example
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("c-submit-button").addEventListener("click", areAllFieldsFilled);
});
function areAllFieldsFilled(event) {
event.preventDefault(); // For testing, REMOVE THIS
var requiredFields = document.getElementsByTagName('form')[0].getElementsByTagName('input');
var questions = document.getElementsByTagName('form')[0].getElementsByTagName('textarea')[0];
var check = 0;
if (questions.value == '') {
console.log("questions was empty");
check++;
} else {
for (var i = 1; i < requiredFields.length - 1; i++) {
if (requiredFields[i].value == '') {
check++;
break;
}
}
}
console.log(`check count is ${check}`);
if (check == 0) {
console.log("Returning True");
return true;
} else {
console.log("Returning False");
return false;
}
// or replace the above 7 lines with return check == 0
}
<form lpformnum="1">
<div class="c-forms-form" tabindex="0">
<div class="c-editor" style="display:none;">
<input type="text" class="c-forms-form-style" style=" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
</div>
<div class="c-forms-form-body">
<div class="c-forms-template" sys:attach="dataview" dataview:data="{binding entry, source={{ Cognito.Forms.model }} }">
<div class="c-forms-form-main c-span-24 c-sml-span-12">
<div class="c-section c-col-1 c-sml-col-1 c-span-24 c-sml-span-12" data-field="Section">
<div class="">
<div class="c-section c-col-1 c-sml-col-1 c-span-24 c-sml-span-12" data-field="Section">
<div class="">
<div class="c-name c-field c-col-1 c-sml-col-1 c-span-24 c-sml-span-12 c-required" data-field="Name">
<div class="c-label">
<label>Name</label>
</div>
<div>
<div class="c-offscreen">
<label for="c-0-12">First</label>
</div>
<div class="c-editor c-span-1" style="width: 50%; float: left;">
<input type="text" id="c-0-12" placeholder="First">
</div>
<div class="c-offscreen">
<label for="c-1-12">Last</label>
</div>
<div class="c-editor c-span-1" style="width: 50%; float: left;">
<input type="text" id="c-1-12" placeholder="Last">
</div>
</div>
<div class="c-validation">First and Last are required.</div>
</div>
<div class="c-email c-field c-col-1 c-sml-col-1 c-span-24 c-sml-span-12 c-required" data-field="PreferredEmailAddress">
<div class="c-label">
<label for="c-3-11">Preferred Email Address</label>
</div>
<div class="c-editor">
<input type="text" id="c-3-11">
</div>
<div class="c-validation">Preferred Email Address is required.</div>
</div>
<div class="c-phone c-phone-international c-field c-col-1 c-sml-col-1 c-span-12 c-sml-span-12 c-required" data-field="Phone">
<div class="c-label">
<label for="c-4-10">Phone</label>
</div>
<div class="c-editor">
<input type="text" id="c-4-10">
</div>
<div class="c-validation">Phone is required.</div>
</div>
<div class="c-yesno-radiobuttons c-field c-col-13 c-sml-col-1 c-span-12 c-sml-span-12" data-field="WouldYouLikeForUsToCallYou">
<legend class="c-label">Would you like for us to call you?</legend>
<div class="c-editor c-columns-0">
<label class="c-yesno-radio" for="c-5-8">
<input type="radio" name="group7" id="c-5-8" checked="checked"><span>Yes</span></label>
<label class="c-yesno-radio" for="c-5-9">
<input type="radio" name="group7" id="c-5-9"><span>No</span></label>
</div>
<div class="c-validation"></div>
</div>
<div class="c-text-multiplelines c-field c-col-1 c-sml-col-1 c-span-12 c-sml-span-12 c-required" data-field="Questions">
<div class="c-label">
<label for="c-6-6">Questions:</label>
</div>
<div class="c-editor">
<textarea id="c-6-6" type="text" height=""></textarea>
</div>
<div class="c-validation">Questions: is required.</div>
</div>
</div>
<div class="c-validation"></div>
</div>
</div>
<div class="c-validation"></div>
</div>
</div>
</div>
<div id="c-recaptcha-div"></div>
<div class="c-forms-error">
<div class="c-validation"></div>
</div>
<div class="c-button-section">
<div class="c-action">
<button class="c-button" id="c-submit-button">Submit</button>
</div>
</div>
</div>
<div class="c-forms-confirmation">
<div class="c-forms-confirmation-message c-html" sys:attach="dataview" dataview:data="{binding entry, source={{ Cognito.Forms.model }} }"><span><p><strong>Thank you for reaching out!</strong></p> <p>We look forward to being in touch with you soon.</p></span></div>
</div>
</div>
</form>
Some notes:
Using a more selective selector would be a more concrete approach.
I am using bootstrap-slider.js. My problem is that I can't link input number with a slide. I want to slide to change too if the input number is changed.
Slider
<div id="slider-year" class="search-block">
<h2 class="title">Production year</h2>
<div class="slider-year-amount">
<span class="pull-left">1900</span>
<span class="pull-right">2017</span>
</div>
<input type="text" class="year-slider" style="width:100%" data-slider-min="1900" data-slider-max="2017" data-slider-step="1" data-slider-value="[1900,2017]" />
<div class="row">
<div class="year-box">
<div class="col-lg-6">
<label>From</label>
<input type="number" min="1900" max="2019" class="form-control" placeholder="1900" id="minYear" value="1900" name="year_since">
</div>
<div class="col-lg-6">
<label>To</label>
<input type="number" min="1901" max="2020" class="form-control" placeholder="2017" id="maxYear" value="2017" name="year_to">
</div>
</div>
</div>
</div>
How I try to update slider:
jQuery("#minYear").change(function () {
jQuery("#slider-year").slider('setValue', jQuery(this).val());
});
Also here is documentation for this slider if anyone is curious, I couldn't find solution there: http://www.eyecon.ro/bootstrap-slider
JsFiddle: https://jsfiddle.net/y95vfds3/6/
Many years have passed... Anyway, here is my solution:
$('#year-slider').slider()
.on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
$('.form-control').on('input', function() {
let minVal = parseInt($('#minYear').val());
let maxVal = parseInt($('#maxYear').val());
$('#year-slider').slider('setValue', [minVal, maxVal])
});
https://jsfiddle.net/p98bcxuv/
Do you want like this?
$("#minYear").change(function() {
$("#slider-year").slider('setValue', jQuery(this).val());
});
val = $('.year-slider').slider();
$('.year-slider').on('slide', function(ev) {
$('#minYear').val(ev.value[0]);
$('#maxYear').val(ev.value[1]);
});
https://jsfiddle.net/gnanavelr/y95vfds3/7/
https://jsfiddle.net/gnanavelr/y95vfds3/8/
$(document).ready(function () {
jQuery.validator.addMethod("insz", function (value, element) {
var insz = $('#txtINSZ').val()
var controle = parseInt(insz.substring(13, 15))
var getal = insz.substring(0, 2) + insz.substring(3, 5) + insz.substring(6, 8) + insz.substring(9, 12)
var rest = parseInt(getal) % 97
alert("we doin' this mun")
return 97 - rest == controle;
}, "* Amount must be greater than zero");
$('#form1').validate({
rules: {
txtINSZ: {
required: $('#cbInsz').prop('checked') == false,
insz: function () {
$('#cbInsz').prop('checked') == true;
}
}
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();// to display the default error placement
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<form method="post" action="#" id="form1" a="" novalidate="novalidate">
<div id="container">
<div class="container-fluid">
<div class="col-xs-12">
<div class="form-horizontal col-xs-4" id="divDimLeft">
<span id="lblTitleAlgemeen">Algemen Informatie</span>
<div class="checkbox" style="margin-left:20px;">
<span id="lblCheck">
<input type="checkbox" id="cbInsz" checked="">
INSZ nummer werknemer gekend?
</span>
</div>
<div class="form-group" id="divINSZ">
<span id="lblINSZ" class="required" for="txtINSZ" aria-required="true">INSZ-nummer gekend?</span>
<input name="ctl00$ContentPlaceHolder1$txtINSZ" type="text" maxlength="15" id="txtINSZ" class="form-control required form valid" oninput="autoInvullen()" aria-required="true" placeholder="__.__.__-___.__" aria-invalid="false" required=""><label id="txtINSZ-error" class="error" for="txtINSZ" style="display: none;"></label>
</div>
<div class="form-group">
<span id="lblNaam" class="required" for="txtNaam" aria-required="true">Naam</span>
<input name="ctl00$ContentPlaceHolder1$txtNaam" type="text" maxlength="40" id="txtNaam" class="form-control form requiredField error" aria-required="true" aria-invalid="true"><label id="txtNaam-error" class="error" for="txtNaam">Dit veld is verplicht.</label>
</div>
<div id="divButton" class="text-right" style="width: 87.5%">
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Volgende" id="btnSubmit" class="btn btn-primary col-xs-2" style="float: none; min-width:200px;">
</div>
</div>
</div>
</div>
</div>
</form>
I wanted to make a custom validator but for some reason it's not working at all. The required does work so there is no issue with finding the elements in my page. So is there someone who has any idea why it is not working?
Thans in advance, under here you find the code i'm using including the method I wrote and the start of the validate method.
You can't just insert a comparison operator all by itself as the parameter; you need a function that returns the value of this parameter, in this case a boolean from the comparison operator...
$('#form1').validate({
rules: {
txtINSZ: {
required: function() {
return $('#cbInsz').prop('checked') == false;
},
insz: function() {
return $('#cbInsz').prop('checked') == false;
}
....
Solved it, I just putted the rules out of the rules section. After the validation code I putted this:
$('#txtINSZ').rules("add", {
required:true,
insz:true
})
Works perfectly.
I also faced the same situation, but in my case below two steps worked.
use data-rule-insz="true" attribute on your HTML input element for which you want custom validation.
also add a name attribute as mentioned in the below example:-
<input id="customer" name="customer" data-rule-insz="true" required type="text" class="typeahead form-control" />
I have a question like so.
I have HTML structure:
<form id="form">
<div class="row">
<div class="item-input">
<label for="A1">A1</label>
<input type="text" name ="A1" />
<span class="input-require">(*)</span>
<span class="info">(Enter A1)</span>
</div>
<div class="item-input">
<label for="A2">A2</label>
<input type="text" name ="A2" />
<span class="input-require">(*)</span>
<span class="info">(Enter A2)</span>
</div>
</div>
<div class="row">
<div class="item-input">
<label for="B1">B1</label>
<input type="text" name ="B1" />
<span class="input-require">(*)</span>
<span class="info">(Enter B1)</span>
</div>
<div class="item-input">
<label for="B2">B2</label>
<input type="text" name ="B2" />
<span class="input-require">(*)</span>
<span class="info">(Enter B2)</span>
</div>
</div>
...
</form>
Now I want to selected 'span' has class "info" behind input[type=text] each.
I try:
<script type="text/javascript">
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest("item-input").next().find('span.info');
console.log(spanInfo.text()); // Result is empty
});
});
</script>
Why is empty? Help me please. How do I, thanks
var spanInfo = $(this).closest("item-input").next().find('span.info');
Should be
var spanInfo = $(this).closest(".item-input").next().find('span.info');
You are missing the . (dot, class)
Your mean is show "(Enter A2)" and "(Enter B2)" or show all 4 element value: (Enter A1), (Enter A2), (Enter B1), (Enter B2)
If only show 2 value then CODE HERE
else You want to show 4 value, you can code:
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest(".item-input").find('span.info');
console.log(spanInfo.text());
});
});