[RESOLVED] Make a field compulsory

@jpuJun 14.2016

Hi there

I’m trying to make a specific field required on a contact form but the current js is coded to allow for more than one field to be used and it will send. I need to make the contact number field required so that users are prompted to add it if the field is omitted for any reason.

Here’s the current code snippet:

app.contactSend = function(e) { if ( typeof e != “undefined” ) e.preventDefault();

var doc = document, fullName = doc.getElementById(“fullName”), email = doc.getElementById(“emailAddress”), contactNumber = doc.getElementById(“contactNumber”), company = doc.getElementById(“company”), message = doc.getElementById(“message”);

if ( fullName.value == “” && ( email.value == “” || contactNumber.value == “” ) && message.value == “” ) { if ( fullName.value == “” ) app.fieldToFocus = fullName; else if ( email.value == “” && contactNumber.value == “” ) app.fieldToFocus = contactNumber;

else app.fieldToFocus = message;

alert(“Please complete your name, either a contact number or email address and a message.”, “Contact Us”, function(){ app.fieldToFocus.focus() });

return; }

app.post(“../controller/webService.php?fullName=” + fullName.value + “&emailAddress=” + email.value + “&contactNumber=” + contactNumber.value + “&company=” + company.value + “&message=” + message.value , function(d) { if ( d == “0” ) alert(“Your enquiry has been successfully sent.”, “Contact Us”); else alert(“Your enquiry could not be sent. Please try again later.”, “Contact Us”); }, function() { alert(“Your enquiry could not be sent. Please try again later.”, “Contact Us”); } ); }

Any help is appreciated and thanks in advance

to post a comment

JavaScript

5 Comments(s) _↴

@Kevin2Jun 15.2016 — #I don't quite understand what you want. Do you want both email and contact number fields to be required? If so this works:

[code=html]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Contact Us</title>
 <style>
 label { display: block; }
 </style>
 </head>
 <body>
 <h1>Contact Us</h1>
 <form action="#" method="post">
 <label>Your Full Name: <input type="text" name="fullName" required></label>
 <label>Your Email Address: <input type="email" name="emailAddress" required></label>
 <label>Your Telephone Number: <input type="tel" name="contactNumber" required></label>
 <label>Your Company: <input type="text" name="company" required></label>
 <label>Your message:<br>
 <textarea name="message" required></textarea></label>
 <input type="submit" value="Submit"> <input type="reset">
 </form>
 </body>
 </html>[/code]

If you want either (not both) email or phone to be required here's something I did a couple years ago on another project (modified for your situation):

[code=html]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Contact Us</title>
 <style>
 fieldset { border: 0; }
 #telWrapper, #emWrapper { display: none; }
 #contactp:checked ~ #telWrapper, #contactem:checked ~ #emWrapper { display: block; }
 #contactp:checked ~ #emWrapper, #contactem:checked ~ #telWrapper { display: none; }
 </style>
 <script>
 function contactt(ph,em){
 ph.setAttribute("required", "");
 em.removeAttribute("required", "");
 }
 function contacte(ph,em){
 em.setAttribute("required", "");
 ph.removeAttribute("required", "");
 }
 onreset=function(){
 document.getElementById('telWrapper').style.display = 'none';
 document.getElementById('emWrapper').style.display = 'none';
 }
 </script>
 </head>
 <body>
 <h1>Contact Us</h1>
 <form action="#" method="post">
 <label>Your Full Name: <input type="text" name="fullName" required></label>
 <fieldset>
 <legend>Preferred contact method:</legend>
 <input type="radio" name="contact" id="contactp" value="phone" onclick="contactt(phone,email)" required> <label for="contactp">Phone</label>
 <input type="radio" name="contact" id="contactem" value="e-mail" onclick="contacte(phone,email)" required> <label for="contactem">E-mail</label>
 <label id="telWrapper">Phone number: <input type="tel" id="phone" name="phone"></label>
 <label id="emWrapper">E-mail address: <input type="email" id="email" name="email"></label>
 </fieldset>
 <label>Your Company: <input type="text" name="company" required></label><br>
 <label>Your message:<br>
 <textarea name="message" required></textarea></label><br>
 <input type="submit" value="Submit"> <input type="reset">
 </form>
 </body>
 </html>[/code]

@jpuauthorJun 15.2016 — #Hi Kevin2

Thank you for your reply.

My challenge at the moment is that the javascript if/else statement allows the form to be submitted even if just the name field is completed. I actually need the form to alert that the contact number field is compulsory. The statement was written by a previous developer and it doesn't alert if the contact number is left out and that's what I need as the contact number field is very important to the client in generating contact information for their leads.

Here is the js again, please see what I can change on this statement to make the contact number field important and that it alerts the user to complete it if they don't:

app.contactSend = function(e) {

if ( typeof e != "undefined" )

e.preventDefault();

 var doc = document,
   fullName = doc.getElementById("fullName"),
   email = doc.getElementById("emailAddress"),
   contactNumber = doc.getElementById("contactNumber"),
   company = doc.getElementById("company"),
   message = doc.getElementById("message");
 
   if ( fullName.value == "" && ( email.value == "" || contactNumber.value == "" ) && message.value == "" ) {
   if ( fullName.value == "" )
   app.fieldToFocus = fullName;
   else if ( email.value == "" && contactNumber.value == "" )
   app.fieldToFocus = contactNumber;
 
   else
   app.fieldToFocus = message;
 
   alert("Please complete your name, either a contact number or email address and a message.", "Contact Us", function(){ app.fieldToFocus.focus() });
 
   return;
   }
 
   app.post("../controller/webService.php?fullName=" + fullName.value + "&emailAddress=" + email.value + "&contactNumber=" + contactNumber.value + "&company=" + company.value + "&message=" + message.value   , 
   function(d) {
   if ( d == "0" )
   alert("Your enquiry has been successfully sent.", "Contact Us");
   else
   alert("Your enquiry could not be sent. Please try again later.", "Contact Us");
   },
   function() {
   alert("Your enquiry could not be sent. Please try again later.", "Contact Us");
   }
   );
  }

@rootJun 15.2016 — #When posting code, please have the courtesy to wrap in forum code tags, it makes reading code easier.

@jpuauthorJun 15.2016 — #Hi there

Apologies for that, I don't know how to wrap code in forum tags as I'm a newbie but I'll remember that for next time.

@TrainJun 15.2016 — #BBcode tags

http://www.dailywritingtips.com/forum/misc.php?do=bbcode

Been using them since 2000 and they do come in handy.

Also in #JavaScript _↴

Hide Referesh/Cancel Window Changing Text size and colour Why does this not work?

Success!

Help @jpu spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Make a field compulsory

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Make a field compulsory

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴