We Keep Coding

Disable form fields on input into a group of other fields

I have the below form and would like to use jQuery to do the following:
1/ Disable the fields 'filter_from' and 'filter_to' if any character is entered into any one or more of the fields 'filter_loan_id', 'filter_fname', 'filter_lname', 'filter_postcode'.
2/ Re-enable the fields 'filter_from' and 'filter_to' only if there is no input in any of the fields 'filter_loan_id', 'filter_fname', 'filter_lname', 'filter_postcode'. That is, all 4 of these fields are empty.
I have the below code which works for point 1 - It disables the 2 fields when any of the other fields have data entered.
It does not work as required for point 2 - It currently re-enables the 2 fields if any one of the other fields is cleared. It should only re-enable the 2 fields when all of the other fields are cleared.
The fields 'filter_com' and 'filter_employer' should be ignored. They are only mentioned here to explain that not all of the fields on the form are to be used to disable the other 2 fields, just selected fields.
<form>
<input name="filter_from" type="text" autocomplete="off">
<input name="filter_to" type="text" autocomplete="off">
<input name="filter_loan_id" type="text" autocomplete="off">
<input name="filter_fname" type="text" autocomplete="off">
<input name="filter_lname" type="text" autocomplete="off">
<input name="filter_postcode" type="text" autocomplete="off">
<input name="filter_com" type="text" autocomplete="off">
<input name="filter_employer" type="text" autocomplete="off">
</form>
$(document).ready(function() {
$('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').change(function() {
if ($(this).val() != '') {
$('input[name=filter_from]').prop('disabled', true);
$('input[name=filter_to]').prop('disabled', true);
} else {
$('input[name=filter_from]').prop('disabled', false);
$('input[name=filter_to]').prop('disabled', false);
}
});
});

Try concatenating the values of all the relevant inputs and use that for checking
$(document).ready(function() {
var disableable = $('input[name=filter_from], input[name=filter_to]'),
valuable = $('input[name=filter_fname], input[name=filter_lname], input[name=filter_loan_id], input[name=filter_postcode]').on('input change', function() {
var combinedValue = valuable.get().map(function(element) {
return element.value;
}).join('');
disableable.prop('disabled', combinedValue !== '');
});
valuable.trigger('change');
});
input:disabled{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
filter_from<input name="filter_from" type="text" autocomplete="off"><br> filter_to
<input name="filter_to" type="text" autocomplete="off"><br> filter_loan_id
<input name="filter_loan_id" type="text" autocomplete="off"><br> filter_fname
<input name="filter_fname" type="text" autocomplete="off"><br> filter_lname
<input name="filter_lname" type="text" autocomplete="off"><br> filter_postcode
<input name="filter_postcode" type="text" autocomplete="off"><br> filter_com
<input name="filter_com" type="text" autocomplete="off"><br> filter_employer
<input name="filter_employer" type="text" autocomplete="off">
</form>

Populating error message with field name in Parsley js

I couldn't find anything in the Parsley docs or in Google.
Is there an easy way to set an attribute in input and populate the error message with custom message.
For example:
<label>First name
<input type="text" required/>
</label>
with give a standard error "This value is required."
But it would be nice to have something like
<label>First name
<input type="text" required data-parsley-field-name="Last name"/>
</label>
with error like "Last name is required"
Or as an option, just grad string from<label>.
I know that I can set custom messages, but you have to do it on each input.

This will your job
<form method="post" id="myForm">
<input type="text" name="phone" class="form" data-err="last name" value="" class="required" data-parsley-required="" />
<input type="text" name="phone" class="form" data-err="First name" value="" class="required" data-parsley-required="" />
<input type="submit" value="Go">
$(document).ready(function() {
$("#myForm").parsley();
$.listen('parsley:field:error', function(){
var i = 0;
$("#myForm .form").each(function(k,e){
var field = $(e).data("err");
$(e).next("ul").find("li:eq("+i+")").html(field+" is required");
});
});
});
here is working fiddle JsFiddle

How to make the user enter either of the 2 fields

<input type="text" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
I have got these 2 text boxes and I am using these text boxes for searching users on a webpage.
I want the users can search using both these text boxes.
I have written the query for that but I am facing a problem, if user writes anything in either of the text boxes then it should not show any error on the front end but if user leaves both text fields empty then an error should be generated and I want to do it on the design page.
I don't want to write a validation code for that.
I have tried required field but it does not work in my case as either of the 2 text boxes should be input with data.

If you want to do validation in UI, please follow the below steps
1) Provide id's to both the input fields, which are used to validate the fields
<input type="text" id="firstname" name="firstname" placeholder=" Enter First Name" required/><input type="hidden" name="search" value="true" >
<input type="text" id="lastname" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
2) Using javascript you can valiate as below
function validate() {
if(document.getElementById("firstname").value.trim() != "" && document.getElementById("lastname").value.trim() != "" ) {
// show alert saying required input fields.
} else {
// do the submit action
}
}
3) Call the validate function on submit of the form.

Using Jquery/java script you can do client side validation..
Your HTML
<input type="text" id="first" name="firstname" placeholder=" Enter First Name" /><input type="hidden" name="search" value="true" >
<input type="text" id ="last" name="lastname" placeholder="Enter Last Name" /><input type="hidden" name="search" value="true" >
<input type="button" id="button1" value="check"/>
Validation
$("#button1").click(function()
{
$first=$("#first").val();
$sec=$("#last").val();
if(($first=="")&&($sec==""))
{
alert("Please enter any");
}
});

Walk through a form in javascript and check for blank inputs?

I apologize for asking such a "noob" question but I'm outside my area of expertise here.
I'm using Dojo 1.9 and I need to walk through a submitted form and determine if any of the input fields are blank. The tricky part is that the form is dynamic, it can contain an array of child elements of each array element, with names like itemList[1].myName:
<form id="businessReferences" action="/yabba/dabba/doo" method="post">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
</form>
What is the best way to walk through this form and check to see if all the fields for each parent element are empty? For example if all the fields for itemList[2] are empty? Is there a particular method for doing this? Seems like it would be a fairly common problem but I haven't been able to track down an answer.

Just add an submit button in the form
<form id="businessReferences" action="/yabba/dabba/doo" method="post" onsubmit="return validate()">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
<input type='submit' value="Submit"/> <!-- to trigger validation on this button click -->
</form>
Javscript for validation , it will account for dynamically added element also
<script type='text/javascript'>
function validate(){
FromRef = document.getElementById('businessReferences');
for(i=0; i<FromRef.elements.length; i++)
{
if((FromRef.elements[i].value).trim() ==""){ // see if the value is blank popup and alert
alert( FromRef.elements[i].name +"is required");
return false; // not to submit form
}
return true;//submit form
}
</script>

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you

Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};

First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});

this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();