We Keep Coding

Conditional jQuery validation based on custom attribute

I'd like to enable/disable buttons on key up change conditionally based on a custom data attribute that matches between an input and a button. I've solved it with just one input, but it seems that when I add another one in the mix, the buttons don't seem to enable.
Furthermore, I have a hunch that it's because of .each() but I can't put my finger on it.
Here's the CodePen I've tried and failed on
var validation = $('[data-validation]');
var validate;
validation.on("change keyup", function (e) {
let validated = true;
validation.each(function () {
let value = this.value;
validate = $(this).data('validation');
if (value && value.trim() != "") {
validated = false;
} else {
validated = true;
return false;
}
});
if (validated) {
$('[data-validator=' + validate + ']').prop("disabled", true);
} else {
$('[data-validator=' + validate + ']').prop("disabled", false);
}
});

The key here is to only run your validation code for the input that was changed. As opposed to what you have, which is to run for all inputs.
To get the input that actually changed, you can utilize the .target property of the event object passed to the event handler.
Alternatively, if you remove the validation.each() entirely, it also works. That is because jQuery sets the value of this to be the DOM element (not a jQuery-wrapped element) that actually triggered the event.
var validation = $("[data-validation]");
var validate;
validation.on("change keyup", function (e) {
let validated = true;
let value = this.value;
validate = $(this).data("validation");
if (value && value.trim() != "") {
validated = false;
} else {
validated = true;
return false;
}
if (validated) {
$("[data-validator=" + validate + "]").prop("disabled", true);
} else {
$("[data-validator=" + validate + "]").prop("disabled", false);
}
});

How to redirect to another page using javascript

I am trying to find a way to redirect to another page using javascript once the user presses the submit form. I know how to do it using HTML but I can not get it to work here. The form submits but then it won't take you anywhere. I have tried a couple of different things I found online but nothing seems to work.
Here is my code
"use strict";
// global variables
var profile = {};
var formValidity = true
// validate entered password
function validateEmail() {
var email1Input = document.getElementById("email");
var email2Input = document.getElementById("email_retype");
email1Input.value = email1Input.value.toLowerCase();
email2Input.value = email2Input.value.toLowerCase();
var errorDiv = document.getElementById("emailError");
try {
if (email1Input.value.localeCompare(email2Input.value) !== 0) {
throw "The e-mails do not match";
}
// remove any password error styling and message
email1Input.style.background = "";
email2Input.style.background = "";
errorDiv.style.display = "none";
errorDiv.innerHTML = "";
}
catch(msg) {
// display error message
errorDiv.style.display = "block";
errorDiv.innerHTML = msg;
// change input style
email1Input.style.background = "rgb(255,233,233)";
email2Input.style.background = "rgb(255,233,233)";
formValidity = false;
}
}
/* create event listeners */
function createEventListeners(){
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener){
form.addEventListener("submit", validateForm, false);
}else if (form.attachEvent) {
form.attachEvent("onsubmit", validateForm);
}
}
/* validate form */
function validateForm(evt) {
if(evt.preventDefault) {
evt.preventDefault(); // prevent form from submitting
}else {
evt.returnValue = false; // prevent form from submitting in IE8
}
formValidity = true; // reset value for revalidation
validateEmail();
if (formValidity === true) {
document.getElementsByTagName("form")[0].submit();
location.href = "about.php";
}
}
/* run setup functions when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
}else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}

You are unable to submit the form and then redirect. because the submit will redirect to the page defined in the form's "action". I see that your javascript function is just validating the fields
Example:
<form action = "action_page.php" method = "get">

This should help some... your if statements, such as:
if(window.addEventListener){ ... } || if(document.addEventListener){ ... }
will not execute the way you are expecting in your current implementation. If you would like to set up your event handlers when the window loads, you'd be better of implementing something like:
window.onload = createEventListeners;
// or
window.onload = function() {
var form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", validateForm, false);
}
Here is some documentation on window.onload
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
and submitting an HTML with examples using javascript event handlers
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
Although, if you really need/want to manually redirect the user using js, one way you can achieve this through window.location:
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I normally wouldn't normally recommend redirecting users this way, but I don't know enough about your code entirely, and it's still something that is very good to understand.

Stop form submission if radio button is checked

I have a form on FormAssembly, and I would like to stop someone submitting the form if they select the 'No' Radio Button for the question 'Are you an employer?'. I have put what I have so far in a jsfiddle.
JS:
$(document).ready(function() {
$('input#tfa_1904').click(function() {
if ($('#tfa_1904').is(':checked') {
submitButton.disabled = true;
}
else {
submitButton.disabled = false;
}
});
});
submitButton code:
document.addEventListener("DOMContentLoaded", function() {
var warning = document.getElementById("javascript-warning");
if (warning != null) {
warning.parentNode.removeChild(warning);
}
var oldRecaptchaCheck = parseInt('0');
if (oldRecaptchaCheck !== -1) {
var explanation = document.getElementById('disabled-explanation');
var submitButton = document.getElementById('submit_button');
if (submitButton != null) {
submitButton.disabled = true;
if (explanation != null) {
explanation.style.display = 'block';
}
}
}
});

In your case you don't need to check whether the radio button is checked as only one will be checked at a time. So, just capturing the click will suffice.
$(document).ready(function() {
$('input#tfa_1904').click(function() {
$('#submit_button').prop('disabled', true);
});
$('input#tfa_1903').click(function() {
$('#submit_button').prop('disabled', false);
});
});
Updated fiddle:
https://jsfiddle.net/h5r8gud1/8/

See if check box is clicked until it is clicked

I am seeing how I can make an Are You Human checkbox, but I am having a problem (Code At The End). I am trying to make it see if it is clicked until it is clicked. I tried onclick, but that is not working.
window.onload = function() {
var input = document.getElementById('ruhuman');
function check() {
if (input.checked) {
ruhuman.checked = true;
if (event.originalEvent === undefined) {
ruhuman.human = false;
} else {
ruhuman.human = true;
}
}
alert(ruhuman.human);
alert(ruhuman.checked);
}
input.onchange = check;
check();
}
<input type="checkbox" id="ruhuman" class="ruhuman" onclick="check()" required="required">
<label>R U Human?</label>
Edit: Thanks for your help! Finished product at http://ruhuman.github.io/.
To the people that answered I can put your github for your help!

originalEvent is JQuery, not JavaScript. A workaround is to test screenX and screenY -- if it's a human, these will have some value based on the checkbox position. Also, you can remove the onclick from your html and tie your click event like this:
document.getElementById ("ruhuman").addEventListener("click", function(e){
if (this.checked) {
ruhuman.checked = true;
if (e.screenX && e.screenY) {
ruhuman.human = true;
} else {
ruhuman.human = false;
}
}
console.log(ruhuman.human);
console.log(ruhuman.checked);
});
JS Fiddle Demo

This works: https://jsfiddle.net/rz4pmp5L/3/
var input = document.getElementById('ruhuman');
var ruhuman =
{
checked: false
};
function check()
{
if (input.checked)
{
ruhuman.checked = true;
}
alert(ruhuman.checked);
}
input.onchange = check;
check();
The problem was (at least) that ruhuman was not defined at all.

The form is not submitted once submitted with invalid input?

I have a javascript function like this:
function validateInput() {
var search_text = document.getElementById('search_text').value;
var size = document.getElementById('size').value;
var submitButton = document.getElementById('sb_search');
document.getElementById('sb_search').disabled=false;
var filter = /^[\x20-\x7E]*$/;
if (filter.test(search_text) && search_text.length>0){
return true;
}
else{
submitButton.setAttribute('disabled');
}
}
Once I press the submit button without value and without satisfying the regex the button is not submitted after that.

you are disabling the submit button when the input is zero or not as per the regex !
also you are not returning true which is holding it from submition !

put a return false in the else condition.
instead of document.getElementById('sb_search').disabled=false; try
document.getElementById('sb_search').removeAttribute('disabled')

Put return false in else statement
function validateInput() {
var search_text = document.getElementById('search_text').value;
var size = document.getElementById('size').value;
var submitButton = document.getElementById('sb_search');
document.getElementById('sb_search').disabled=false;
var filter = /^[\x20-\x7E]*$/;
if (filter.test(search_text) && search_text.length>0){
return true;
}
else{
submitButton.setAttribute('disabled');
return false;
}
}

That's because search_text.length == 0 and thus you fall into the else and disable the submit button