Develop Reference

Disable and enable button in js

i want to make a form with inputs and "submit" button. Idea is to disable button as long as inputs are empty or value of input not correctly (email validation).
I have my js code, but the problem is that, button starts at the beggining as disabled, but when i write something in first input it start to be not disabled, even if rest of inputs have not correct value.
My function:
document.getElementById("my-button").disabled = true
function inputValidator() {
var $element = $(this);
// for all input fields
if ($element.val()) {
$element.closest('.my-form__item').removeClass('error');
document.getElementById("my-button").disabled = false;
} else {
$element.closest('.my-form__item').addClass('error');
document.getElementById("my-button").disabled = true;
}
// for email field
if ($element.attr('id') === 'email' && $element.val()) {
if (!reg.test($element.val())) {
$element.closest('.my-form__item').addClass('error');
document.getElementById("my-button").disabled = true;
} else {
$element.closest('.my-form__item').removeClass('error');
document.getElementById("my-button").disabled = false;
}
}
Does anyone knows how to solve it?

Iterate over each element inside the form and check if one elements value length is zero. Note: Also the submit button needs a value in this implementation. A more native way would be to simply add the required tag to each input which also gives a good user experience.
JS approach
function validateForm() {
let inputs = document.forms["example"].elements;
let status = true;
[...inputs].forEach((input) => {
if(input.value.length == 0) status = false;
});
document.getElementById('submit').disabled = !status;
}
<form id="example">
<p>
<label>First name</label><br>
<input type="text" name="first_name" onKeyup="validateForm()">
</p>
<p>
<label>Last name</label><br>
<input type="text" name="last_name" onKeyup="validateForm()">
</p>
<p>
<label>Email</label><br>
<input type="email" name="email" onKeyup="validateForm()">
</p>
<p>
<button disabled=true id="submit" value="submit">Submit</button>
</p>
</form>
Pure HTML Approach
<form id="example">
<p>
<label>First name</label><br>
<input type="text" name="first_name" required>
</p>
<p>
<label>Last name</label><br>
<input type="text" name="last_name" required>
</p>
<p>
<label>Email</label><br>
<input type="email" name="email" required>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>

The order of my jquery validator is working wrong, and I have no idea why

My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs
$(document).ready(function() {
$('#send').attr('disabled', true);
$('.input,#check').on('keyup', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').attr('disabled', false);
} else {
$('#send').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>

You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.
You can put multiple event names in the argument to .on(), to handle both with the same code.
You also have an incorrect class .input, there are no elements with class="input" in the HTML. I've changed it to .input-cpk.
$(document).ready(function() {
$('#send').prop('disabled', true);
$('.input-cpk,#check').on('keyup click', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').prop('disabled', false);
} else {
$('#send').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>

It's because you're using the wrong selector.
Try this
$('input,#check').on('keyup', function() {
Instead of this
$('.input,#check').on('keyup', function() {
Additionally you might want to use the .on('change') instead of .on('keyup')

prevent form submission when all input text fields are empty but allow submission when any of them in not empty with jquery

The scenario is that I have a form with dynamic multiple text field.
<form id="add" action="" method="POST">
<input type="text" id="product-$id" name="quantity[]" class="quantity" />
</form>
depending on condition it generates multiple input fields. It looks like this
<form id="add" action="" method="POST">
<input type="text" id="product-1" name="quantity[]" class="quantity" />
<input type="text" id="product-2" name="quantity[]" class="quantity" />
<input type="text" id="product-3" name="quantity[]" class="quantity" />
</form>
Now I want to prevent my form submission if all of the text fields are empty.
But I will allow form submission if any of them have a value.

I hope the following code will give you an idea on how to proceed.
function SubmitForm(){
//get all the dynamic textbox in the form
var quantities =$('#add').find('.quantity');
var hasValue = false;
$.each(quantities, function(i, txtbox)
{
if ($.trim($(txtbox).val()) != '')
{
hasValue = true;
return false; //break
}
});
if (!hasValue)
{
return; //do not proceed further
}
//code here as atleast one textbox has a value
}

Set flag when looping through input fields

I have a series of multiple text fields and a text area. I’m looping through the text fields and the text area and checking if there is a value. If there is not a value I set a flag that says pass=false. Otherwise I set pass=true and would like to fire a custom event if everything evaluates to true. The problem is that because one input field evaluates to true it evaluates them all to true even though two of the fields have no value in them. How would I go about doing this if I wanted it so that all fields have to be filled in but still set pass=false if one or two of them are filled in? Any help is greatly appreciated!
JS Fiddle link: http://jsfiddle.net/YyAjp/12/
HTML:
<form name="headerForm">
<label for="fname">*First Name</label>
<input type="text" class="text" id="fname" name="fname" />
<br/>
<label for="mname">*Middle Name</label>
<input type="text" class="text" id="mname" name="mname" />
<br/>
<label for="fname">*Last Name</label>
<input type="text" class="text" id="lname" name="lname" />
<br/>
<label for="notes">*Notes</label>
<textarea name="notes" /></textarea>
Submit
</form>
JQUERY
$(document).ready(function() {
$("#submit").on('click', function() {
var pass;
$("input,textarea,select").each(function() {
if($(this).val() === ''){
pass = false;
$(this).prev('label').css('color','red');
} else {
pass = true;
$(this).prev('label').css('color','black');
}
});
console.log(pass);
if(pass){ alert('trigger custom event') } else { alert('pass failed'); }
});
});

Change
pass = true;
into
pass = pass && true;
and initialize it to true:
$("#submit").on('click', function() {
var pass = true;
http://jsfiddle.net/mblase75/pgM5X/
(You might also want to use $.trim() on the values first.)

How to add class to (or change class of) a form field if it is empty? jQuery

I have a form like below;
<form id="myform" name="myform">
<input type="text" class="required" value="" name="qwer" /><br />
<input type="text" value="" name="asdf" /><br />
<input type="text" class="required" value="" name="zxcv" /><br />
<input type="text" value="" name="tyui" /><br />
<input type="text" class="required" value="" name="ghjk" /><br />
<input type="submit" value="Submit" />
</form>
I want to check if the text fields with class="required" is blank or not at the time of submission. If they are blank, I want to change the corresponding blank field's class to error. If all the required fields are not empty, I want to alert the serialized data. I've tried this;
$('#myform input[type=submit]').click(function(e){
e.preventDefault();
var data = $('#myform').serialize();
if($.trim($('#myform input[type=text].required').val()).length == 0){
$(this).addClass("error");
}else{
alert(data);
}
});
How can I do this? Here is the fiddle.

You should loop over every element with the required class.
You are setting the error class on the submit button because you use $(this).addClass(), the $(this) is a reference to the submit button.
$('#myform input[type=submit]').click(function(e){
e.preventDefault();
var data = $('#myform').serialize();
[].slice.call($('#myform input[type=text].required')).forEach(function (elem, index) {
$elem = $(elem);
if($elem.val().length == 0)
$elem.addClass("error");
});
});
Fiddle demo
Fyi: HTML5 comes with a bunch of pseudo-classes to check for invalid form inputs so you don't have to code it by yourself, take a look here if you're interested.

After removing the unnecessary value="" on inputs
You can do this:
$('#myform input[type=submit]').click(function (e) {
e.preventDefault();
var data = $('#myform').serialize();
if ($('.required').is('[value=""]')) {
$('.required[value=""]').addClass("error");
} else {
alert(data);
}
});
Demo