Right now, I'm validating a contact form using java/ajax, and am generating the error messages in javascript with the following
messages:
{
fname: "Please fill in your name",
email: "Your email will help us contact you",
subject: "Please fill in the subject of your message",
recipient: "Please let us know who you would like to contact",
message: "Please fill out your message",
captcha: "Please answer 2x3"
}
which generates
<label class="error">The error message for this id</label>.
I'm not really sure how a label is generated, but I'm wanted to just replace the empty text inputs with the value of the error message when it's not filled out.
I've tried using
fname.value = "the error message";
but that doesn't seem to work. Any ideas on how to get the error message to show up within the input instead of generating a label?
Form markup:
<form name="myform" id="myform" action="" method="post">
<fieldset>
<label for="fname" id="name_label">First Name</label>
<input type="text" name="fname" id="fname" value="">
<label for="lname" id="lname_label">Last Name</label>
<input type="text" name="lname" id="lname" value="">
</fieldset>
<fieldset>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" value="">
<label for="phone" id="phone_label">Phone Number</label>
<input type="phone" name="phone" id="phone" value="">
</fieldset>
<fieldset>
<label for="message" id="message_label">Message</label>
<textarea name="message" id="message" size="30" value=""></textarea>
<label for="captcha" id="captcha_label">What's 2x3?</label>
<input type="text" name="captcha" id="captcha" value="">
</fieldset><
input type="submit" name="submit" value="Submit">
</form>
<p>
<img src="%3C?php%20echo%20get_template_directory_uri();%20?%3E/images/loader.gif" id="loading" alt="Loader" name="loading">
</p>
<div id="results"></div>
Use the following JS:
document.myform.fname.value = messages_parent_obj.messages.fname;
I've put together a jsFiddle here: http://jsfiddle.net/dWYWe/ (note that I wrapped messages in a parent object since your snippet implied there was one).
Related
Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>
I have created a simple form for contact-us section on a website. For submit button, initially I used type=submit but later came across a suggestion to change it to type=button. However the code is not working for submit as well as reset. Can someone please help to point out whats wrong in my code below.
function submitForm() {
var frm = document.getElementById('contactFormAP');
alert('H2');
frm.submit(); // Submit the form
alert('H3');
frm.reset(); // Reset form data
return false;
}
<form class="contactForm" action="email_form.php?do=send" method="post" role="form" id="contactFormAP">
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" id="contactnumber" placeholder="Contact Number" data-rule="minlen:10" data-msg="Please enter correct contact number with country code" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="text-center">
<input type="button" value="Submit" id="submitbtn" onclick="submitForm()">
</div>
</form>
Use the OnSubmit-Listener instead:
https://www.w3schools.com/jsref/event_onsubmit.asp
I am new to JavaScript. I know how to create an alert box and now create an error message if a field was left empty in an HTML form, but can someone please show me how to display multiple error messages if more than one field is empty? Below is my HTML code for the form and JavaScript:
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" onblur="validateForm()"><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<label for="telephone">Telephone:</label><br>
<input type="text" name="telephone" id="telephone">
</fieldset>
<br>
<fieldset>
<legend>Your Information:</legend>
<p>
<label for="service">What service are you inquiring about?</label>
<select name="service" id="service">
<option value="Collision">Collision</option>
<option value="Mechanical">Mechanical</option>
<option value="Custom">Custom</option>
<option value="Other">Other</option>
</select>
</p>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" id="comments" rows="4" cols="40">
</textarea><br>
<input type="submit" value="Submit"/>
</fieldset>
<script src="validate.test.js"></script>
</form>
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your name";
return false;
}
}
You need to surround your JavaScript code by script tag.
<script type="text/javascript">
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your
name";
return false;
}
}
</script>
One easy way is to use the required attribute on the input HTML elements.
it specifies that an input field must be filled out before submitting the form.
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" required><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" required><br>
<label for="telephone" required>Telephone:</label><br>
<input type="text" name="telephone" id="telephone" required>
<input type="submit">
</fieldset>
Another approach is to use the javascript as you have described in your code snippet. That is useful if you need to customize the Error message for each field.
If what #alpeshpandya and #Agalo have answered solves your problem (even if not):
I think you are trying to validate only name input even if the user forgets to fill it. The onblur event fires when the input loses focus. You have some choices here: 1. you can validate when the user clicks to submit your form, 2. or putting your validateForm in the others input onblur, 3. or something else.
Validating when submitting form: a good way to validate the whole thing and set all error messages at once.
Validating using onfocus: in each input, you have to validate the other ones above it when user clicks on it (using onfocus or another event), e.g., when the user tries to go to another input, your error messages will pop.
I am currently working on a 'contact form', I have been working on this for quite a while but, I just can't figure out how to make JavaScript email the form to my email adress.
This is my code :
<form id="myform" action="mailto:contact#anika.nl">
<label for="FirstName">Name:</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="EMail">Email:</label>
<input id="EMail" name="EMail" type="text" />
<label for="Message">Message:</label>
<textarea id="Message" cols="20" name="Address" rows="5"></textarea>
<input name="submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">// <![CDATA[
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
// ]]></script>
Does someone see what I'm doing wrong/what's missing?
So I have a basic form that takes in Name, Email, Date of Arrival, Date of Departure and Comment with a big "Send" button. Here is the code for that:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post">
<p class="name">
<input name="Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="Email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="email">
<input name="Date Of Arrival" type="date" class="validate feedback-input" id="date" placeholder="Date Of Arrival" />
</p>
<p class="email">
<input name="Date Of Departure" type="date2" class="validate feedback-input" id="date2" placeholder="Date Of Departure" />
</p>
<p class="text">
<textarea name="Text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
It successfully opens up my mail client with an email. The issue is that this is what is in the body of the email:
Name+%250D%250A+=Name+Test&Email+%250D%250A=test%40email.com&Date+Of+Arrival+%250D%250A=09%2F04%2F2015&Date+Of+Departure+%250D%250A=24%2F04%2F2015&Text=This+is+a+test+comment
How can I style this? I have looked online and can't figure it out.
For this example, this is how I would like the email body to look:
Name: Name Test
Email: test#email.com
Date of Arrival: 09/04/2015
Date of Departure: 24/04/2015
Message Body: This is a test comment.
I wouldn't mind having the subject field repopulated too with "booking request" or something.
Thanks!
It's quite easy. All you have to do is specify your Content Type (MIME). Change your form to:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" enctype="text/plain">
Define enctype in form tag:
<form class="form" id="form1" action="mailto:myemail#email.com" method="post" ENCTYPE="text/plain">
Unfortunately what you can do here in terms of formatting is very limited. I would suggest to have a look at this answer:
Mailto on submit button