Creating multiple JavaScript error messages contact form? - javascript

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.

Related

How do I extract form data in html with js

I'm trying to create a web app, and I need to know the user input from form.
<form action="" method="get" class="settings">
<div class="settings">
<label for="length">length of character(s): </label>
<input type="number" name="length" id="length" placeholder="5" required>
<input type="submit" value="Change">
</div>
</form>
I need the form to run a js func foo()
so I assume that I need to put it
<form action="" method="get" class="settings">
↑
how do I get the value of id="length" and use it in form action"foo()"?
You can get the value of length with document.getElementById("id").value;
In order to run a js from form, you need to use onsubmit="" instead of action=""
onsubmit="" allows you to execute a js function upon submission of the form,
while action="" allows you to be redirected to another page/site upon submission.
Read more about action="" in this site
onsubmit="" is here
Here is a workable code based on your example
function foo(){
var lgt = document.getElementById("length").value;
alert(lgt);
}
<form class="settings" onsubmit="foo()">
<div class="settings">
<label for="length">length of character(s): </label>
<input type="number" name="length" id="length" placeholder="5" required>
<input type="submit" value="Change">
</div>
</form>

Javascript alert not working on website

I have tried several different things in javascript but nothing seems to work on my site. I'm trying to have an alert pop up when submitting a form. This is what I have
<form>
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
<form onsubmit="return confirm('Do you really want to submit the form?');">
</form>
This is the website: http://webpages.uncc.edu/~kjardine/MC_Portfolio/contact.html
You were almost there, the key is the code you have already has a <form> tag which starts on line 1, so you should add your onsubmit="" attribute into that one. Here is the revised code that should do the trick:
<form onsubmit="return confirm('Do you really want to submit the form?');">
Name:<br>
<input type="text" name="name" required><br>
Email:<br>
<input type="email" name="email" required><br>
Phone (Format: 999-999-9999):<br>
<input type="tel" name="phone" required pattern="\d{3}[\-]\d{3}[\-]\d{4}"><br>
Nature of comment:<br>
<input type="checkbox" name="comment" value="Question"> Question
<input type="checkbox" name="comment" value="Business Inquiry"> Business Inquiry
<input type="checkbox" name="comment" value="Comment"> Comment
<input type="checkbox" name="comment" value="Other"> Other <br>
Comment:<br>
<textarea></textarea><br>
<input type="submit" value="Submit">
</form>
The onsubmit should go in the form element at the top, like the commenter said. and the form element its in currently should be deleted.
That said, you could also have checked a "dont show any more popups" option once for that website, and now popups will be disabled until you enable the popups again, by clearing your chrome cache for instance.
<form onsubmit="return confirm('u sure?');">
<input>...
</form>
I also advise against using onsubmit as an HTML parameter, and instead writing a js handler in an actual <script></script block to do the confirm.
window.onload = function () {
document.getElementById("myForm").onsubmit = function onSubmit(form) {
return confirm('u sure?');
}
}
Remember to add id="myForm" to your form element in this case.

Disable submit button once the user submits the form

I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/

Customizing parsley.js to show an icon near the offending field

I would like parsley.js to show an icon near the label of every offending field. Something like:
<label class="warning" for="name">Name</label>
(http://jsfiddle.net/7q3ktchb/)
Essentially, I would like to configure parsley to set a class of the label of the offending field.
Is that possible?
You can achieve that using the events parsley:field:success and parsley:field:error
<form id="myForm">
<label for="name">Name</label>
<input type="text" name="name" data-parsley-minlength="5" data-parsley-required="true" />
<label for="email">Email</label>
<input class="cuiMessageWarningImg" type="text" name="email" data-parsley-required="true"
data-parsley-type="email" />
<button type="submit">Submit</button>
</form>
<script>
$('#myForm').parsley();
$.listen('parsley:field:error', function(ParsleyField) {
ParsleyField.$element.prev('label').addClass('warning');
});
$.listen('parsley:field:success', function(ParsleyField) {
ParsleyField.$element.prev('label').removeClass('warning');
});
</script>
Check this working example in jsfiddle

Error messages on contact form

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).

Categories

Resources