I have the following html:
<form >
<input type="text" name="username" id="username" value="" placeholder="User name" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />
<input type="email" name="email" id="email" value="" placeholder="Email" />
<input type="text" name="firstname" id="firstname" value="" placeholder="First name" />
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="date" id="date" placeholder="date" />
<ul class="actions align-center">
<li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
</ul>
</form>
Also the following javascript:
(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?
Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?
jsfiddle link
It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.
$('form input').change(function() {
https://jsfiddle.net/hn6tf36L/1/
Related
Okey comunity,
I need help with my code, so this is my form code
<form action="input.php" method="POST">
<input type="text" class="input" name="firstname" placeholder="First Name" required>
<input type="text" class="input" name="lastname" placeholder="Last Name" required=""><br>
<input type="text" class="input lower" name="streetnumber" placeholder="Street / Number" required=""><br>
<input type="text" class="input lower" name="city" placeholder="City" required=""><br>
<input type="text" class="input lower" name="country" placeholder="Country" required=""><br>
<button type="submit">Add User</button>
</form>
All I want to do is to ask if my 'required' in input can trigger validation. Type of validation I need basicly is NOT NULL and I want to have paragraph above each input to show up with text (This filed is a must).
If you find my question confusing please write a comment and I will provide more info.
I know I must use some JS code, but I would realy be glad if you can help me with that code and tell me what I need.
Best regards comunity
var country = document.getElementById("country").value;
var p = document.getElementById("pcountry");
if (!country) {
pn.classList.add("show");
return false;
} else {
return true;
}
This is my answer
I have the following code, and I want the gather_form_elements array to show up as an unordered list.
Here is my html part:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="Justin Roohparvar">
<link rel="stylesheet" href="CSS\css.css">
<script src="Javascript/form.js"></script>
<title>Contact Form</title>
</head>
<body>
<form method="POST" action="week_1_contact_form.html">
<h1>Contact Form</h1>
<input id="first_name" type="text" maxlength="50" size ="25" placeholder="First Name" required> <br /><br />
<input id="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br /><br />
<input id = "email" type="email" name="email" placeholder="Email" required> <br /> <br />
<input id="phone_number" type="tel" name="phone_number" placeholder="Phone Number" required><br /><br />
<input type="Submit" name="Submit" value="Submit" onclick="getFormElements()">
</form>
</body>
</html>
And my form.js code is below:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name"), document.getElementById("last_name"),
document.getElementById("email"), document.getElementById("phone_number"));
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
for(i=0; i<gather_form_elements.length; i++)
{
document.write(gather_form_elements[i]);
}
}
Any suggestions would be appreciated.
First of all, you have to get values from your inputs, not just elements itself. With your approach, it should look like this:
function getFormElements() {
var gather_form_elements = new Array(document.getElementById("first_name").value, document.getElementById("last_name").value,
document.getElementById("email").value, document.getElementById("phone_number").value);
displayValues(gather_form_elements);
}
function displayValues(gather_form_elements) {
document.write('<ul>');
for(i=0; i<gather_form_elements.length; i++)
{
document.write('<li>'+gather_form_elements[i]+'</li>');
}
document.write('</ul>');
}
As Newbie says, you need to get the value of each controls. A much simpler version of the listener is to make use of the form's elements collection. Controls must have a name to be successful, you can leverage that to work out which controls to get the values of:
function getFormElements(form) {
var values = [];
[].forEach.call(form.elements, function(control) {
if (control.name) {
values.push(control.value);
}
});
// Show values for testing
console.log(values);
return values;
}
<form onsubmit="getFormElements(this); return false"> <!-- prevent submit for testing -->
<h1>Contact Form</h1>
<input name="first_name" type="text" maxlength="50" size="25" placeholder="First Name" required> <br><br>
<input name="last_name" type="text" maxlength="50" size="25" placeholder="Last Name" required> <br><br>
<input name="email" type="email" placeholder="Email" required> <br> <br>
<input name="phone_number" type="tel" placeholder="Phone Number" required><br><br>
<input type="submit" value="Submit">
</form>
This lets you add more controls and doesn't care what you call them.
So only name controls that need a name, don't use IDs if you don't need them and put the submit listener on the form's submit handler so that no matter how the form is submitted, the listener is called. ;-)
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">
How to change onKeyup with on blur using jquery so user will get validation message on leaving the email field?
Use jQuery blur() and set onkeyup to null like in the snippet below.
$(document).ready(function() {
document.getElementById('Email').onkeyup = null;
$('#Email').blur(function() {
checkconditions(this.value, this.name, this.type);
});
});
function checkconditions(v, n ,t) {
alert('Blur');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">
Replace
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onkeyup="checkconditions(this.value, this.name, this.type);">
with
<input class="text empty" type="text" size="20" name="Email" id="Email" value="" onBlur="checkconditions(this.value, this.name, this.type);">
I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html
You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.
You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.
I have a problem with a regular expression. console.log shows me the login regular expression isn't respected, but my span doesn't show, my email span works.
I think it's a basic JS/jQuery problem, but I couldn't find the solution.
HTML:
<form name="formSignup">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" class="required" />
<label for="prenom">Prenom :</label>
<input type="text" name="prenom" id="prenom" class="required" />
<label for="email">Votre Email:</label>
<input type="email" name="email" id="email" class="required" onclick="spanHide()" />
<label for="username">Login:</label>
<input type="text" name="username" id="username" class="required" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
<input id="Submit1" type="button" value="Login" data-role="button" data-inline="true" data-theme="b" onclick='createuser()' />
</fieldset>
</form>
JS:
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var loginReg= /^[a-zA-Z0-9]+$/;
if (email == '') {
$("#email").after('<span id="errormail" class="error">Please enter your email address.</span>');
}
if (!loginReg.test(myLogin)) {
console.log("error");
$("#username").after('<span id="errorlogin" class="error">only letter + digits plz</span>');
}
if (!emailReg.test(email)) {
$("#email").after('<span id="errormail" class="error">Enter a valid email address.</span>');
}