Hello all. I have some jquery on my form that shows/hides divs based on the chosen value of a drop down menu
function show1() {
var div_num = $("#airpvtyesno").val();
if (div_num == 0) {
$("#pickuppvt").hide();
$("#pickuplhr").hide();
};
if (div_num == 1) {
$("#pickuppvt").hide();
$("#pickuplhr").show();
};
if (div_num == 2) {
$("#pickuppvt").show();
$("#pickuplhr").hide();
};
}
I am trying to implement a rule on my form that if a specific form element is left empty, the form cannot be processed and an alert is called.
Here is an example of the javascript I use for that feature:
function IncompleteForm()
{
var FormOk = true;
if (document.myform.myfield.value == '')
{
alert('Please enter a value for this field.');
document.myform.myfield.focus();
FormOk = false;
};
return FormOk;
}
However, I need to combine the two features.
I only want specific field elements to run this rule if the div they are contained in is shown.
It would ideally look something like this:
function show1() {
var div_num = $("#airpvtyesno").val();
if (div_num == 0) {
$("#pickuppvt").hide();
$("#pickuplhr").hide();
};
if (div_num == 1) {
$("#pickuppvt").hide();
$("#pickuplhr").show();
IF pickuplhr.FIELD1 IS EMPTY - ALERT - PLEASE ENTER A VALUE FOR FIELD 1
};
if (div_num == 2) {
$("#pickuppvt").show();
$("#pickuplhr").hide();
IF pickuppvt.FIELD2 IS EMPTY - ALERT - PLEASE ENTER A VALUE FOR FIELD 2
};
}
my limited ability in jquery and general syntax is giving me difficulties combining these features.
I have got the feature working but it calls all three alerts at once. How can I edit the code so it only calls the one alert (whichever one is empty) and then returns to that field.
<script type="text/javascript">
function IncompleteForm()
{
var FormOk = true;
if ($(document.bookingform.paxtitle).is(':visible') && document.bookingform.paxtitle.value == '') {
alert("Please enter the passenger title");
document.bookingform.paxtitle.focus();
FormOk = false;
};
if ($(document.bookingform.paxfirstname).is(':visible') && document.bookingform.paxfirstname.value == '') {
alert("Please enter the passenger first name");
document.bookingform.paxfirstname.focus();
FormOk = false;
};
if ($(document.bookingform.paxlastname).is(':visible') && document.bookingform.paxlastname.value == '') {
alert("Please enter the passenger last name");
document.bookingform.paxlastname.focus();
FormOk = false;
};
return FormOk;
}
</script>
<script type="text/javascript">
function IncompleteForm()
{
if ($(document.bookingform.paxtitle).is(':visible') && document.bookingform.paxtitle.value == '') {
alert("Please enter the passenger title");
document.bookingform.paxtitle.focus();
return false;
};
if ($(document.bookingform.paxfirstname).is(':visible') && document.bookingform.paxfirstname.value == '') {
alert("Please enter the passenger first name");
document.bookingform.paxfirstname.focus();
return false;
};
if ($(document.bookingform.paxlastname).is(':visible') && document.bookingform.paxlastname.value == '') {
alert("Please enter the passenger last name");
document.bookingform.paxlastname.focus();
return false;
};
return true;
}
</script>
That can now be simplified, by moving the common behaviour out to a separate function.
function isFilled(field) {
return $(field).is(':visible') && field.value === '';
}
function validateForm(form, toValidate) {
var i,
validateInfo,
field;
for (i = 0; i < toValidate.length; i += 1) {
validateInfo = toValidate[i];
field = form.elements[validateInfo.field];
if (!validateInfo.rule(field)) {
window.alert(validateInfo.message);
field.focus();
return false;
}
}
return true;
}
function IncompleteForm() {
var toValidate = [
{field: 'paxtitle', rule: isFilled, message: 'Please enter the passenger title'},
{field: 'paxfirstname', rule: isFilled, message: 'Please enter the passenger first name'},
{field: 'paxlastname', rule: isFilled, message: 'Please enter the passenger last name'}
],
form = document.bookingform;
return validateForm(form, toValidate);
}
Then, if different fields required some additional rules, other than checking that they’re filled, that information can be added in to the toValidate structure too. But that would be for later planning only if needed.
By the way, that validateForm function looks much simpler when the browsers can handle certain techniques.
function validateForm(form, toValidate, onFailure) {
return toValidate.every(function (validateInfo) {
var field = form.elements[validateInfo.field];
if (!validateInfo.rule(field)) {
onFailure();
return false;
}
return true;
});
}
...
return validateForm(form, toValidate, function () {
window.alert(validateInfo.message);
field.focus();
});
The form is allowed to submit even if there is no value in the flight number. Funnily enough, when you DO enter a value into the flight number field, the message DOES pop up and the form does not submit (ie it works but only if there is a value).
I have no idea why, I have tried to change this line: return $(field).is(‘:visible’) && field.value == ‘’;