Javascript failing to validate form - javascript

I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>

I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's

In the script, you misspelt eaddress as eadress :)

You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute

Related

Disable form submit button until all input/textarea fields are filled, without using for loop (no jQuery)

I have the following contact form:
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
In order to disable submit button until all input/textarea fields are filled, I'm using the following code:
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
It works perfectly.
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
But I would like to achieve the same result using methods such .filter, .find, .map or .some - if possible (the best one in terms of performance).
Would you give me some suggestions?
Use the :scope > [name] query string to select children of the form which are input-like, and if .some of them aren't filled, disable the button:
const post = document.querySelector('form');
post.oninput = function() {
post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
.some(input => !input.value.trim())
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
You could also use the required attribute, if it'll suit your needs, though the button won't appear disabled - rather, it'll redirect the user to the next required field:
<form id="post">
<label for="name">Name</label>
<input required id="name" name="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input required id="email" name="email" type="text">
<label for="subject">Object</label>
<input required id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea required id="text" name="text"></textarea>
<button type="submit">Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.
Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');
Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>
I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

jQuery Input Validation

I am trying to make sure my inputs aren't empty on my form. I am using jQuery to check the inputs, but it isn't checking the inputs. The submit button allows it to go through:
<form id="preenrollment-airlines" name="preenrollment-airlines" class="tn-form-conversion" method="post" action="#" onSubmit="return(validate());">
<div class="form-col">
<input id="firstName" name="firstName" onFocus="if (this.value=='firstName') this.value = ''" type="text" placeholder="First name*">
</div>
<div class="form-col">
<input id="lastName" type="text" name="lastName" onfocus="if (this.value=='lastName') this.value = ''" type="text" placeholder="Last name*" />
</div>
<div class="form-col">
<input id="addr" type="text" name="address" onfocus="if (this.value=='address') this.value = ''" type="text" placeholder="Address*" />
</div>
<div class="form-col">
<input id="city" type="text" name="city" onfocus="if (this.value=='city') this.value = ''" type="text" placeholder="City*" />
</div>
<div class="form-col">
<input id="zip" type="text" name="postalCode" onfocus="if (this.value=='postalCode') this.value = ''" type="text" placeholder="Postal Code*" />
</div>
<div class="form-col">
<input id="dm" type="text" name="dm" onfocus="if (this.value=='dm') this.value = ''" type="text" placeholder="DM # * (Bottom left corner of your letter)" id="dm" />
</div>
<div class="form-col">
<input id="email" type="text" name="email" onfocus="if (this.value=='email') this.value = ''" type="text" placeholder="Email*" />
</div>
<div class="form-col">
<input type="text" name="digits" onfocus="if (this.value=='digits') this.value = ''" type="text" placeholder="Last 4 digits of current BMO AIR MILES World credit card*" id="digits" />
</div>
</div>
<div class="clear"></div>
<input type="hidden" name="formName" id="formName_id" value="preenrollment-airlines" />
<div style="clear: both;">
<br />
<div style="text-align: center;">
<input id="submit" style="margin-top: 25px;" class="primary button" type="submit" value="Submit" />
</div>
</div>
Here is the javascript I have so far:
$(document).ready(function () {
$('#preenrollment-airlines input').blur(function () {
if ($(this).val().length === 0) {
$(this).parents('input').addClass('warning');
}
});
});
I'm not sure where to go from here. I can't use any plugins to do the validation, so I need to check if the inputs are blank and then I can add a class to it.
You want to capture the Submit event in order to prevent the form from sending. In this function you can check to ensure the inputs are all valid.
For more on the submit event and how to capture it using jQuery,
view the docs here

Get input value using JavaScript

i need to get my input value using JavaScript but i get undefined only. Here is my code:
document.forms[0].elements[0] or
document.forms['form_id']['fieldname']
Where is my mistake?
Here is my form:
<form action="registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg-form">
<div>
<label for="username">Username</label>
<input type="text" name="username" required="">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required="">
</div>
<div>
<label for="email">E-mail</label>
<input type="text" name="email">
</div>
<div>
<label for="telephone">Telephone</label>
<input type="text" name="telephone">
</div>
<div>
<label for="sex">Sex</label>
<input type="radio" value="male" name="sex">Male
<input type="radio" value="female" name="sex">Female
</div>
<div>
<label for="user_photo">User photo</label>
<input type="file" name="user_photo">
</div>
<div>
<label for="birthDate">Birth Date</label>
<input type="date" name="birthDate">
</div>
<div>
<label for="country">Country</label>
<input type="text" name="country">
</div>
<div>
<label for="info">Info about user</label>
<textarea name="info"></textarea>
</div>
<div>
<input type="hidden" name="PHPSESSID" value="<?php echo session_id(); ?>">
</div>
<div><input type="submit" value="Register"></div>
</form>
Form lies in php file, maybe problem in that? Because when i console log forms.length i get zero...
You need to put these DOM object accessing codes into the window.onload event handler,because it need to wait the document loaded before accessing the DOM objects.
Can you try for example:
document.forms['reg-form']['email'].value
I think you might not are not targeting the right Dom-element with
document.forms['form_id']['fieldname']
Please look at this jsfiddle-Sample:
http://jsfiddle.net/3gevoyn5/8/
I have two input fields and get the Values with this code, which is then output again:
function getValues(){
var test = document.forms['myform']['firstname'].value + " " + document.forms['myform']['lastname'].value;
document.getElementById("demo").innerHTML = test;
}

Make form run a javascript function?

How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!

Categories