Hi there,
I’m pretty noob, and try as I may I cannot fathom how to get my form to give an error message if the telephone or email is not filled in. I only need one of them to be filled in, i.e. it’s a contact form, I need to be able to respond somehow.
I can make it do an error for each individually, but not either or. I was trying to use an OR statement. || but I couldn’t make it work 
Your suggestions are invaluable.
Cheers in advance,
Eoin
p.s. what is a trackback?
Give the form a unique identifier, and attach an onsubmit event to the form.
<html>
...
<body>
<form id="userDetails">
...
</form>
...
<script src="script.js"></script>
</body>
</html>
script.js
var form = document.getElementById('userDetails');
form.onsubmit = function () {
...
};
In the onsubmit function, check that either the telephone is entered, or the email is entered.
form.onsubmit = function () {
var form = this,
telephone = form.elements.telephone,
email = form.elements.email;
if (telephone.value || email.value) {
// at least one is okay, no action needed
} else {
alert('Please provide either a telephone number or an email address.');
return false;
}
};
Or, you can invert the if condition like this:
if (!(telephone.value || email.value)) {
alert('Please provide either a telephone number or an email address.');
return false;
}
Or, you can invert the terms in the if condition:
if (!telephone.value && !email.value) {
alert('Please provide either a telephone number or an email address.');
return false;
}
All three do the same job, but there should only be one of them that gives you a better understanding of what the code is wanting to achieve.
When you click on it you go to an info page that explains exactly what it does.
Thank you oh mighty Javascript Guru. I like your “Ham is to Hamster” quote 
I am still struggling.
Because I want to use email validation too, I have been working with the validation plugin for Jquery.
So I tried to adapt your script as follows:
var form = document.getElementById('#homepage_enquiry');
form.onsubmit = function () {
var form = this,
tel = form.elements.tel,
email = form.elements.email;
if (tel.value || !email.value) {
// at least one is okay, no action needed
}
if (!tel.value || email.value) {
$('#email').validate({
rules: {
email: {required: true, email: true},
}
})
}
else {
alert('Please provide either a telephone number or an email address.');
return false;
}
It doesn’t seem to validate at all any more. It’s really frustrating and I haven’t even started trying to get the error messages in the right place yet!
Using the jQuery validation means that a completely different solution is available for you.
You can use a dependency expression
rules: {
email: {required: '#telephone: blank'}
}
So that the email will only be required if the telephone is blank.
You can do similar with the telephone rule too.
Ah thank you sweet Guru of the South, I am still struggling though. I have now come up with:
//New Validation
$('#homepage_enquiry').validate({
rules: {
name: {required: true},
enquirytb: {required: true},
email: {required: '#tel: blank', email: true, required: true},
tel: {required: '#email: blank', required: true}
},
success: function(label) {
label.addClass('valid');
}
});
$('#homepage_enquiry :input').blur(function(){}).valid();
As you can see it’s supposed to be rather simple. You need to tell me your name, you need to enter an enquiry, and you need to enter either an email or a telephone number. Presently it requests both things.
If I remove the “required: true” from both the tel/email it requests neither, although gets upset if I don’t put in a correct email address.
Argghhh the sooner they invent knowledge transfers from one brain to another the happier I’ll be In case that’s tomorrow please remember me calling shotgun on your brain “SHOTGUN”.
Look at these:
email: {required: '#tel: blank', email: true, required: true},
tel: {required: '#email: blank', required: true}
You only need the one required there. The second required part on each line is clobbering the first one, so get rid of that second one.
I did try that, but then as I say it wasn’t validating at all, except if I filled in the email address then it would demand a correct email address (and I didn’t very much care for it’s manners lol).
essentially if I left both form fields blank it didn’t require any validation for those parts
Do you have a sample page so that I may experiment locally and craft together a working solution?
Ok mighty Guru, I hath returned with a sample page which can be found here:
Rather Testing Form
Sorry I took so long, it’s a crazy life I lead.
Forget the daft layout of the form that’s the least of my worries that sort of stuff I can happily muddle along with and end up working out how to do it. And ignore the fact that the errors get in the way. I’m sure I’ll bother someone about solving that problem in due time (small steps for little feet).
What I need to really achieve is email and/or telephone needs to be filled in. As you can see I have managed to ensure that name and enquiry fields are required (which is why I’ve not replied for so long I’ve spent much of the time patting myself on the back).
After that I’m going to deal with the recapcha business which you may notice I’ve got half way installed.
Anyway here’s my testing process so far:
Fill in name and enquiry, submit, it all seems to work. Yet no phone/email was filled in.
Fill in nothing it won’t submit. That’s good.
Fill in Name, Enquiry, Phone and it submits, that’s fine
Fill in Name, Enquiry, and an Incorrect email address and it won’t submit (good)
Fill in name, enquiry and a correct email address and it works (fine).
I know it’s not the best form in the world and if that hampers you then feel free to fire abuse my way and I will change it to be more suitable (or try) so that it’s easier to work with.
Many thanks for taking the time to help me, one day when I’m a mighty Guru I hope to remember the favour and help back.
Here’s what you currently have for the tel and email validation rules:
email: {required: '#tel: blank', email: true},
tel: {required: '#email: blank'}
The space before the blank needs to be removed, and that email:true part shouldn’t be there either.
Hold up. I’ve tried that, it works better now I think, but there’s still the issue of the “OR” function.
It seems to require both of them. Or is it something that I’ve done? It seems to be that once the error message is there it doesn’t go away again.
In fact it does seem to go away if I tab between boxes but not if I click. I’ve used the “onblur” validate function, but I’m guessing that’s not the only thing I need to do. Do I use !onfocus?
and I do need the email:true bit because that makes sure it’s a proper email address.
actually if telephone and email are both empty it needs to have an error message saying “you need to enter an email address or telephone number” rather than demanding that both fields are required.
wooo hoooo I made it workkkkk. Thanks for all your help Guru, you’re amazing, and I’m glad you took the time to give me your input. Mucho Gracias