I created a little register form in HTML.
And I created a JS that pops up an alert for each of them if any of them are left blank
Now I want to combine all the alerts into a single one for example at the start a box will appear with all alerts and if you complete one if you push submit the next box will appear without the alert of the box you already completed
This is my JS Code:
function validate()
{
if( document.inrValid.Nume.value == "" )
{
alert( "Introduceti va rog numele!" );
document.inrValid.Nume.focus() ;
return false;
}
if( document.inrValid.Prenume.value == "" )
{
alert( "Introduceti va rog Prenumele!" );
document.inrValid.Prenume.focus() ;
return false;
}
if( document.inrValid.EMail.value == "" )
{
alert( "Introduceti va rog Emailul!" );
document.inrValid.EMail.focus() ;
return false;
}
if( document.inrValid.Telefon.value == "" )
{
alert( "Introduceti va rog Numarul de Telefon!" );
document.inrValid.Telefon.focus() ;
return false;
}
if( document.inrValid.parola.value == "" )
{
alert( "Introduceti va rog Parola!" );
document.inrValid.parola.focus() ;
return false;
}
return( true );
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="inrValid" onsubmit="return(validate());">
<p>Nume <input type="text" name="Nume" /></p>
<p>Prenume <input type="text" name="Prenume" /></p>
<p>EMail <input type="text" name="EMail" /></p>
<p>Telefon <input type="number" name="Telefon" /></p>
<p>Parola <input type="password" name="parola" /></p>
<p><input type="submit" onclick="clickAlert()" value="Submit" name="clickAlert" /></p>
</form>
<script src="script.js"> </script>
</body>
</html
As stated in the comment, you could use the required attribute as a small form of validation.
You could also add all of your error messages to an array, for example:
var checkForm = function () {
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var errors = [];
if (foo.value.length === 0) {
errors.push('Foo is blank');
}
if (bar.value.length === 0) {
errors.push('Bar is blank');
}
alert(errors.join(','));
};
<form onsubmit="checkForm()">
<input id="foo" type="text" />
<input id="bar" type="text" />
<input type="submit" />
</form>
Related
I use the following code for a form that I use to validate and want to display errors just below the fields whenever they occur:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.errorcss {
background-color: yellow;
color:red;
}
</style>
<script type="text/javascript">
error=" ";
function isBlank(s) {
var len=s.length
var i
for(i=0; i<len; ++i) {
if(s.charAt(i) != " ") return false
}
return true
}
function validate(fieldName, fieldValue) {
if(isBlank(fieldValue)) {
error = fieldName + " cannot be left blank.";
alert(fieldName+" cannot be left blank.")
return false
}
return true
}
function validatePass(passwordValue, confirmPasswordValue) {
if (passwordValue !== confirmPasswordValue) {
alert("Password and Confirm Password do not match")
return false
}
return true
}
function validateForm() {
if(!validate("The last name field", document.contest.last.value))
return false
if(!validate("The email field", document.contest.email.value))
return false
if(!validate("The password field", document.contest.pass.value))
return false
if(!validatePass(document.contest.pass.value, document.contest.repass.value))
return false
if(!validate("The description field", document.contest.desc.value))
return false
}
</script>
</head>
<body>
<form name="contest" onSubmit = "return validateForm()" method="GET">
<h2 align="center">Sign Up Form</h2>
<p>
*Last Name:<input type="text" name="last" size="16">
First Name:<input type="text" name="first" size="12">
Middle Initial:<input type="text" name="initial" size="2">
</p>
<div class="errorcss">
<script type="text/javascript">document.write(error);</script>
</div>
<p>
*E-mail Address:<input type="email" name="email">
*Password:<input type="password" size="10" name="pass">
*Confirm Password:<input type="password" size = "10" name="repass">
</p>
<p>
In 50 words or less, describe yourself:
</p>
<textarea name="desc" ROWS="5" COLS="40"></textarea>
<p>
Submit your form:<input type="SUBMIT" value="Submit my form">
</p>
</form>
</body>
</html>
The problem I am facing is that I want the no last name error to be displayed in the div with errorcss class. But it is not displaying it. Further I would like to know how to display all the errors whenever they occur using JavaScript and CSS.
I added 15 semicolons, removed the script inside the error div, gave the errordiv an id ('errordiv'), and added:
document.getElementById('errordiv').innerText=error;
in the function validateForm();.
Result Code:
<!DOCTYPE html>
<html >
<head >
<style type="text/css" >
.errorcss {
background-color : yellow;
color : red;
}
</style >
<script type="text/javascript" >
error = " ";
function isBlank( s )
{
var len = s.length;
var i;
for ( i = 0; i < len; ++i ) {
if ( s.charAt( i ) != " " ) return false;
}
return true;
}
function validate( fieldName, fieldValue )
{
if ( isBlank( fieldValue ) ) {
error = fieldName + " cannot be left blank.";
alert( fieldName + " cannot be left blank." );
return false;
}
return true;
}
function validatePass( passwordValue, confirmPasswordValue )
{
if ( passwordValue !== confirmPasswordValue ) {
alert( "Password and Confirm Password do not match" );
return false;
}
return true;
}
function validateForm()
{
if ( !validate( "The last name field", document.contest.last.value ) ) {
document.getElementById( 'errordiv' ).innerText = error;
return false;
}
if ( !validate( "The email field", document.contest.email.value ) ) {
return false;
}
if ( !validate( "The password field", document.contest.pass.value ) ) {
return false;
}
if ( !validatePass( document.contest.pass.value, document.contest.repass.value ) ) {
return false;
}
if ( !validate( "The description field", document.contest.desc.value ) ) {
return false;
}
}
</script >
</head >
<body >
<form name="contest" onSubmit="return validateForm()" method="GET" >
<h2 align="center" >Sign Up Form</h2 >
<p >
*Last Name:<input type="text" name="last" size="16" > First Name:<input type="text" name="first" size="12" > Middle Initial:<input type="text" name="initial" size="2" >
</p >
<div class="errorcss" id="errordiv" >
</div >
<p >
*E-mail Address:<input type="email" name="email" > *Password:<input type="password" size="10" name="pass" > *Confirm Password:<input type="password" size="10" name="repass" >
</p >
<p >
In 50 words or less, describe yourself:
</p >
<textarea name="desc" ROWS="5" COLS="40" ></textarea >
<p >
Submit your form:<input type="SUBMIT" value="Submit my form" >
</p >
</form >
</body >
There are lot many issues, one them is:
<div class="errorcss">
<script type="text/javascript">
document.write(error);//code fails on page load
</script>
</div>
Have a look here:
function isBlank(s) {
return 0 === s.replace(/\s/g, '').length;
}
function validate(fieldName, fieldValue) {
if (isBlank(fieldValue)) {
alert(fieldName + " cannot be left blank.")
return false
}
return true
}
function validatePass(passwordValue, confirmPasswordValue) {
if (passwordValue !== confirmPasswordValue) {
alert("Password and Confirm Password do not match")
return false
}
return true
}
function validateForm() {
if (!validate("The last name field", document.contest.last.value))
return false
if (!validate("The email field", document.contest.email.value))
return false
if (!validate("The password field", document.contest.pass.value))
return false
if (!validatePass(document.contest.pass.value, document.contest.repass.value))
return false
if (!validate("The description field", document.contest.desc.value))
return false
}
<form name="contest" onSubmit="return validateForm()" method="GET">
<h2 align="center">Sign Up Form</h2>
*Last Name:
<input type="text" name="last" size="16">
<br/>First Name:
<input type="text" name="first" size="12">
<br/>Middle Initial:
<input type="text" name="initial" size="2">
<br/>*E-mail Address:
<input type="email" name="email">
<br/>*Password:
<input type="password" size="10" name="pass">
<br/>*Confirm Password:
<input type="password" size="10" name="repass">
<br/>In 50 words or less, describe yourself:
<textarea name="desc" ROWS="5" COLS="40"></textarea>
<br/>Submit your form:
<input type="SUBMIT" value="Submit my form">
</form>
How to get an Alert on Submit when I left a TextBox empty And It Should Turn To the Next page on submit.
Must Reply,
Thank You.
You can try this :
HTML :
<form action="" method="POST" id="myForm">
<input id="myInput" type="text" />
<input type="submit" />
</form>
(Replace the action attribute by the url of your destination page, the one you call the "next page").
JS (without jQuery):
var myForm = document.querySelector('#myForm');
var myInput = document.querySelector('#myInput');
myForm.addEventListener('submit', function(pEvent) {
if(myInput.value === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
//Do whatever you want
}
});
JS (with jQuery) :
var myForm = $('#myForm');
var myInput = $('#myInput');
myForm.on('submit', function(pEvent) {
if(myInput.val() === '') {
pEvent.preventDefault(); //Prevents the form to be sent
alert('Ho! Stop!');
}
});
Demo : http://jsfiddle.net/af9qvkmp/9/
Here is the demo, based on jQuery!
HTML
<form action="" method="POST" id="form">
<input id="input1" type="text" />
<input id="input2" type="text" />
<input id="input3" type="text" />
<input id="input4" type="text" />
<input id="input5" type="text" />
<input type="submit" />
</form>
JS
$(function() {
$('#form').on('submit', function(event) {
var isError = false;
$(this).find('input[type="text"]').each(function() {
if($(this).val() == '') {
console.log($(this));
isError = true;
return false;
}
});
if(isError) {
event.preventDefault();
alert("Got Error");
} else {
// Submit the form
}
});
});
In form tag write
<form action="" method="post" enctype="multipart/form-data" onsubmit="return checkform(this);">
This is your input field
<input type="text" name="reviewValue" value="" id='starRate2' required>
Javascript Code:
<script language="JavaScript" type="text/javascript">
function checkform ( form ){
if (form.reviewValue.value == "") {
alert( "Please choice your Rating." );
form.reviewValue.focus();
return false ;
}
return true ;
}
</script>
i have tryed to validate textbox using javascript.when i click on the submit button without inserting values to textbox it's display alert box.but after click on "ok" button , page redirect to payments.php page.how to fix it
<form method="post" action="payments.php" >
First Name : <br />
<input name="name" type="text" class="ed" id="name" /> <br />
E-mail : <br />
<input name="email" type="text" class="ed" id="email" /> <br />
<input name="but" type="submit" value="Confirm" onclick="Validation()" />
</form>
function Validation()
{
if (checkFName()&&checkemail())
{
window.event.returnValue = false;
}
}
function checkFName()
{
var tname = document.getElementById("name").value;
if((tname == null)||(tname == ""))
{
alert("Please Enter your First name");
return false;
}
return true;
}
function checkemail()
{
var email = document.getElementById("email").value;
var ap = email.indexOf("#");
var dp = email.lastIndexOf(".");
if((ap < 1)||(dp-ap < 1)||(dp >= email.length-1))
{
alert("invalid email address");
return false;
}
else
return true;
}
You need to change the CONFIRM button type to "button":
<input name="but" type="button" value="Confirm" onclick="Validation()" />
Give your form a name:
<form name="frm" method="post" action="payments.php">
then in your Validation() function, if your form passes validation, you can do the following:
function Validation()
{
if (checkFName()&&checkemail())
{
document.forms["frm"].submit();
}
}
I have written the code so far and came up with this. I have to
Make sure the user input numbers into the text boxes and I was given errors using the Xhtml format, one, the '&&' sign gave me errors and due to online help, I was told I needed to use //
As I student learning Javascript I have no idea what this is or means, but as I placed it there, I was given more errors and my code crashed up after the javascript was added.
Thanks for the help in advance
<head>
<script type = 'text/javascript'>
// <![CDATA[
$('#submit').click(function(){
validateRange();
validateRa();
})
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
// ]]
</script>
<title>Account Lookup</title>
</head>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance"/></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
EDITED
try using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
validateRange();
validateRa();
});
});
function validateRange() {
var txtVal = document.getElementById("CustomerID").value;
var txtVal1=parseInt(txtVal);
if (txtVal1 >= 3000 && txtVal1 <= 3999) {
return true;
}
else {
alert('Please enter a number between 3000-3999');
return false;
}
}
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
}
</script>
<html>
<title>Account Lookup</title>
<body>
<h1> Please Provide Your Information</h1>
<p><input type="text" id="AcctNo" value="Account Number"/></p>
<p><input type="text" id="CustomerID" value="CustomerID" onchange="validateRange()"/></p>
<p><input type="text" name="Type" value="Account Type" onchange="validateRange()"/></p>
<p><input type="text" name="balance" value="Balance" /></p>
<p class="submit" />
<input type="submit" name="commit" value="Submit" id="submit" /><button type="reset" value="Clear">Clear</button></p>
</body>
</html>
BTW the function validateRa missing the closing curly braces you need to add } before // ]]
function validateRa() {
var txtVal1 = document.getElementById("AcctNo").value;
var txtVal2=parseInt(txtVal1);
if (txtVal2 >= 90000 && txtVal2 <= 99999) {
return true;
}
else {
alert('Please enter a number between 90000-99999');
return false;
}
} //<= this is missing in your code
// ]]
I'm having small trouble with javascript validation. I need to validate the select dropdown in my form. I can validate all fields so far but somehow I cannot validate the select dropdown list? Can someone help me validate my form?
Here is my javascript:
<script type="text/javascript">
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}
}
}
function validate()
{
//username password First_n Last_n Company Mobile Email Residence
if( document.form1.First_n.value == "" )
{
alert( "Please enter your first name!" );
document.form1.First_n.focus() ;
return false;
}
if( document.form1.Last_n.value == "" )
{
alert( "Please enter your last name!" );
document.form1.Last_n.focus() ;
return false;
}
if( document.form1.username.value == "" )
{
alert( "Please enter your username!" );
document.form1.username.focus() ;
return false;
}
if( document.form1.password.value == "" )
{
alert( "Please enter your password!" );
document.form1.password.focus() ;
return false;
}
if( document.form1.Mobile.value == "" )
{
alert( "Please provide us your mobile number!" );
document.form1.Mobile.focus() ;
return false;
}
if( document.form1.Email.value == "" )
{
alert( "Please provide us your Email!" );
document.form1.Email.focus() ;
return false;
}
var yourSelect = document.getElementById('Residence');
alert(yourSelect.options[yourSelect.selectedIndex].value)
if(yourSelect.options[yourSelect.selectedIndex].value == '' )
{
alert( "Please provide your country!" );
return false;
}
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}
}
return( true );
}
</script>
And my form:
<form name="form1" method="post" action="add_new.php" onsubmit="return(validate(false));">
<div style="clear:both;padding:0px 10px 0 10px;margin-bottom:40px;">
<h5>Interested in</h5>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="Hosting" type="radio" checked>
<label for="toggle-on" class="btn">Hosting</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="Email accounts" type="radio"
><label for="toggle-off" class="btn">Email accounts</label>
</div>
<div style="clear-both;">
<input name="First_n" type="text" placeholder="First Name*" class="login-text-lbl-pink-no-width" id="First_n">
<input name="Last_n" type="text" placeholder="Last Name*" class="login-text-lbl-pink-no-width" id="Last_n">
</div>
<input name="username" type="text" placeholder="Username*" class="login-text-lbl-pink-no-width" id="username"><br/>
<input name="password" type="password" placeholder="Password*" class="login-text-lbl-pink-no-width" id="password"><br/>
<input name="Company" type="text" placeholder="Company" class="login-text-lbl-pink-odd" id="Company"> <br/>
<input name="Mobile" type="text" placeholder="Phone Number*" class="pink-transparent-item" id="Mobile"> <br/>
<input name="Email" type="text" placeholder="Email*" class="login-text-lbl-pink-odd" id="Email"> <br/>
<select name="Residence" id="Residence" style="background-color: rgba(240, 96, 96, 0.62);border: none;-webkit-appearance: none;
-moz-appearance: none;appearance: none;height: 40px;font-style: italic;width: 270px;padding: 10px;margin: 5px;color: #552726;border-radius: 5px;border: none;float: left;" class="required">
<option value="zero" selected>Country*</option>
<option value="US">America</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="HK">Hong Kong</option><br/>
<input name="domain" class="login-text-lbl-pink-odd" type="text" style="width:350px;margin-bottom:40px;" placeholder="Existing domain" id="domain"> <br/>
<input type="submit" name="Submit" value="Submit" style='font-family: "Neo Sans Light", Verdana, Tahoma;' class="login-button-pink">
</form>
I believe the problem is in the email validation that happens just before the country validation, because if an email address is entered it returns from the function regardless of whether the email passed validation, so it never gets to the country bit:
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}else
return true; // delete this line, and the else
}
You want to return false if there's a problem, but you don't want to return true until the end of the function.
UPDATE: The code now shown in the updated question doesn't work because:
You deleted the validateEmail() function declaration (replacing it with a copy of the code I said to change at the end of validate() - unless that was just a weird copy/paste error in the question)
You changed the if test on the country to check for an empty string, but didn't update the corresponding value="zero" to be value=""
If you fix those it works as shown here: http://jsfiddle.net/58A7K/
Note also that the code I showed above can be simplified - you don't need the ret variable:
if( document.form1.Email.value != "" ) {
if (!validateEmail(document.form1.Email)) {
return false;
}
}
The problem is with following code:
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}else
return true;
}
In the above code, when user enters a valid email, your are returning TRUE as a result the code for validating country is never executed.
Remove the else part from above code snippet.