I have tried adding and removing contact fields and got it down to two for troubleshooting. I have tried it in multiple browsers but I can't seem to get an alert. Just looking to be pointed int he right direction here, another set of eyes may help!
here is the HTML
<html>
<head>
<title> Sugar Shippers International Snacks</title>
<link rel="stylesheet" type="text/css" href="styletest.css" />
<script src="/validateInputtesting.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>
Contact us!
</h2>
<form action="#" method="post" onsubmit="return ValidateInput()">
<label>Name: </label>
<input id="name" name="name" type="text">
<label>Email: </label>
<input id="email" name="email" type="text">
<input type="submit" value="Lets Go"
</form>
</div>
</div>
</body>
</html>
Here is the .JS
function ValidateInput() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (name != '' && email != '') {
if (email.match(emailReg))
alert("Not a real Email address!");
return false;
}
alert("Missing feilds!");
return false;
}
add a > to the end of this line:
<input type="submit" value="Lets Go"
For the validation, personally i would do it like this:
<input id="email" type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
Related
After document.getElementsById("occ").innerHTML = "Already registered"; tag <h2 style="color: red" id ="occ"></h2> doesn't change, but page looks like it reloaded.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ustory - Register</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="CSS_defaults.css" rel="stylesheet">
<script src="Ustory_JS.js"></script>
</head>
<body>
<?php
if($_GET['occupied'] == "true") {
echo($_GET['occupied']);
$occupied = "true";
}
?>
<script>
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementsById("occ").innerHTML = "Already registered";
}
</script>
<div id="reg_in" class="reg" style="color:#FF4D50;">
<form class="reg" name="register" action="U_story_reg.php" method="post" onsubmit="return register_()">
<input type="text" name="firstname" id="firstname" placeholder="Meno" required> <b>*</b><br>
<input type="text" name="lastname" id="lastname" placeholder="Priezvisko" required> <b>*</b><br>
<input type="text" name="nick" id="nick" placeholder="Prezívka"> <br>
<input type="email" name="mail" id="mail" placeholder="E-mail" required> <b>*</b><br>
<input type="password" name="pass" id="pass" placeholder="Heslo" required> <b>*</b><br>
<input type="password" name="pass_again" id="pass_again" placeholder="Heslo znovu" required> <b>*</b><br>
<input type="submit" value="Submit">
<h2 style="color: red" id ="occ"></h2>
</form>
</div>
<h2 style="color: red" id ="occ"></h2>
</body>
</html>
Do you have any idea why document.getElementsById("occ").innerHTML = "Already registered"; doesn't work ?
The code is executing before the DOM element has loaded & you have a typo in getElementsById should be getElementById. You have to either move the code below the html element you are trying to change or wrap it in a $(document).ready function. Like this:
$(document).ready(function() {
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementById("occ").innerHTML = "Already registered";
}
});
In addition, make sure you reference the jQuery library in order to use the document.ready() method. Check out the link below for further information..
https://www.w3schools.com/jquery/event_ready.asp
I am trying to execute the mysql query using PHP form. Below is the form
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="signup.css" type="text/css">
<script type="text/javascript" src="form_val.js"></script>
<title>Untitled Document</title>
</head>
<body bgcolor="#0ca3d2">
<div align="right">
<h2>Go back</h2>
</div>
<div class="form-style-10">
<h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>
<form action="#" method="post" name="myForm" onSubmit="CheckTerms()">
<div class="section"><span>1</span>First Name & Address</div>
<div class="inner-wrap">
<input type="text" name="First_Name" placeholder="Enter First Name" id="fname">
<label id="error" style="color:red"></label>
<input type="text" name="Last_Name" placeholder="Enter last Name"/>
<label id="error_l" style="color:red"></label>
<select name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="section"><span>2</span>Email </div>
<div class="inner-wrap">
<input type="text" name="Email_i" placeholder="enter email here" id="e_mail" />
<label id="error_e" style="color:red"></label>
<button type="button" name="validate" onclick="loadDoc(this.value)">Validate</button>
<div id="check"></div></div>
<div class="section"><span>3</span>Passwords</div>
<div class="inner-wrap">
<input type="password" name="pass" placeholder="Must be 6 to 15 characters" id="Pass" onBlur="PassCheck()" />
<label id="error_p" style="color:red"></label>
<input type="password" name="repass" placeholder="Retype Password" id="RePass"/>
<label id="error_rp" style="color:red"></label>
<span class="privacy-policy">
<input type="checkbox" name="terms" value="value1" id="check_box">Agree to Terms and Conditions
</span>
<input type="submit" name="signup" value="Register" id="sub_button">
<label id="error_lable" style="color:red"></label>
</div>
</form>
</div>
</body>
I have the below form validation in Javascript,
function CheckTerms(){
var letter = /^[a-zA-Z ]*$/;
if(document.myForm.First_Name.value.match(letter) && document.myForm.First_Name.value =="")
{
document.getElementById("error").innerHTML = "* Please Provide First Name";
document.myForm.First_Name.focus();
return false;
}
if(document.myForm.Last_Name.value.match(letter) && document.myForm.Last_Name.value =="" )
{
document.getElementById("error_l").innerHTML = "* Please provide your Last name!";
document.myForm.Last_Name.focus() ;
return false;
}
var email =/^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if(document.myForm.Email_i.value.match(email) && document.myForm.Email_i.value=="")
{
document.getElementById("error_e").innerHTML = "* Please provide your EMAIL!";
document.myForm.Email_i.focus() ;
return false;
}
var min = 6;
var max = 15;
if(document.myForm.pass.value.length < min || document.myForm.pass.value.length > max)
{
document.getElementById("error_p").innerHTML = "Password Should be betweeen 6 to 15 characters";
document.myForm.pass.focus() ;
return false;
}
var pass = document.getElementById("Pass").value;
var re = document.getElementById("RePass").value;
if(pass != re)
{
document.getElementById("error_rp").innerHTML = "Password do not match";
return false;
}
if(document.getElementById("check_box").checked == false)
{
document.getElementById("error_lable").innerHTML = "Please Check";
return false;
}}
<?php
session_start();
include "config.php";
if(isset($_POST['signup']))
{
// my logic here
}
?>
but the problem is, even the javascript returns the error, clicking the submit button , executes PHP script resulting the data entry into database. I want to stop form submission if any of the javascript error exists.
You are not returning the boolean in the event even though you are doing it in the function. onSubmit receives true by default and submits it.
Change
onsubmit="CheckTerms()"
to
onsubmit="return CheckTerms()"
I have a problem. I implemented a signup and a login page. I have the correct url (localhost:3000/login and localhost:3000/signup). But I have a problem. I enter in the signup and I insert the data of the user then if you press the button you are redirecting to localhost:3000/login but I have this error:
Cannot GET /login?firstname=a&lastname=a&username=a&email=a%40e.i&password=a&repeatPassword=a
In practice, when I press the button, all the data that the user has inserted are also added to the url. How is it possible? Can you help me please? Here is my code:
SIGNUP.DUST
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Signup</title>
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/base.css">
<script src="js/app.js"></script>
<script src="js/ajax.js"></script>
<script src="js/library.js"></script>
<script src="js/model.js"></script>
<script src="js/utils.js"></script>
</head>
<body class="body signup">
<div class="vertical-align-wrapper">
<div class="vertical-align-box">
<h1 class="slogan">Now listen.</h1>
<div class="form-signup-wrapper">
<form action="/login" method="GET" class="form-signup">
<input class="form-control form-stacked" name="firstname" placeholder="Firstname" type="text" required="true" id="Firstname">
<input class="form-control form-stacked" name="lastname" placeholder="Lastname" type="text" required="true">
<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked" name="email" placeholder="email" type="email" required="true">
<input class="form-control form-stacked" name="password" id="password" placeholder="Password" type="password" required="true" >
<input class="form-control form-stacked last" name="repeatPassword" id="repeat" placeholder="Repeat password" type="password" onkeyup="enable()" required="true">
<input class="btn btn-beats btn-block btn-stacked" value="Sign up" id = "btnPlaceOrder" type="submit" onclick="setuplogin()">
</form>
<p>Already have an account? <strong>login</strong> now!</p>
</div>
</div>
</div>
<h1 class="fat blue-glow bottom-right">Atelier<span class="pulse" style="display:inline-block;">Beats.</span></h1>
LOGIN.DUST
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="css/standardize.css">
<link rel="stylesheet" href="css/base.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="js/dust-core.min.js"></script>
<script src="/views/views.js"></script>
<script src="js/app.js"></script>
</head>
<body class="body login">
<div class="vertical-align-wrapper">
<div class="vertical-align-box">
<h1 class="slogan">Gotta <i class="fa fa-heart beats pulse" style="color:#B13A3D;"></i> that sound.</h1>
<div class="form-login-wrapper">
<form action="library.html" class="form-login">
<input class="form-control form-stacked" name="username" placeholder="Username" type="text" required="true" id="username">
<input class="form-control form-stacked last" name="password" placeholder="Password" type="password" required="true" id="password" onkeyup="validation()">
<input class="btn btn-beats btn-block btn-stacked" value="Tune in" type="submit" id="submit">
</form>
<p>Don't have an account? <strong>sign up</strong> now! </p>
</div>
</div>
</div>
<h1 class="fat blue-glow bottom-right">Atelier<span class="pulse" style="display:inline-block;">Beats.</span></h1>
</body>
</html>
APP.JS (where are all my function that I'm using)
function setuplogin(){
var userName = document.getElementById("username").value;
var password = document.getElementById("password").value;
var data = {
userName : userName,
password : password
};
console.log(data);
doJSONRequest("POST", "/users/", null, data, function(){
document.location = location.location;
});
}
function validation(){
var userName_login = document.getElementById("username").value;
var password_login = document.getElementById("password").value;
var data = {
userName : userName_login,
password : password_login
};
doJSONRequest("GET", "/users/", {}, data, function(location){
document.location = location.location;
})
}
function enable(){
var a = document.getElementById("repeat");
var password = document.getElementById("password");
var repeat = document.getElementById("repeat");
document.getElementById("btnPlaceOrder").disabled = password.value !== repeat.value;
}
function timeout(){
window.setTimeout(function(){
window.location.href = "../../login.html";
}, 600000);
}
And finally the doJSONRequest. This function is in another document but it's function works. I inserted all the function you should needs to be sure. Hope I explained my problem in the right way:
function doJSONRequest(method, url, headers, data, callback){
if(arguments.length != 5) {
throw new Error('Illegal argument count');
}
doRequestChecks(method, true, data);
var r = new XMLHttpRequest();
r.open(method, url, true);
doRequestSetHeaders(r, method, headers);
r.onreadystatechange = function () {
if (r.readyState != 4 || (r.status != 200 && r.status != 201 && r.status != 204)){
return;
}else{
if(isJSON(r.responseText))
callback(JSON.parse(r.responseText));
else
callback();
}
};
var dataToSend = null;
if (!("undefined" == typeof data) && !(data === null))
dataToSend = JSON.stringify(data);
r.send(dataToSend);
}
Thanks for all
It doesn't look like you have any event listeners for your form submission?
If that is the case, then you have your form method set to GET which will pass the request parameters in the url.
Change the form method to POST and the details will go in the request body, rather than as url paramerters:
<form action="/login" method="POST" class="form-signup">
Here is the following code, I am learning Javascript on my own and wanted to know how I could validate my code to make the textboxes say something like "please enter a value" or "please enter a valid Username or password.
I've attempted, but this is as far as online searching that I have done for it.
<head>
<script type = 'text/javascript'>
function nullcheck()
{
if(document.getElementById("").value==="")
{
alert("Please enter value.");
return false;
}
}
</script>
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<section class="container">
<div class="login">
<h1>Login</h1>
<form method="post" action="index.xhtml">
<p><input type="text" name="login" value="" id="Username or Email" /></p>
<p><input type="password" name="password" value="" id="Password"/></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me"/>
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login" onchange="nullcheck()"/><button type="reset" value="Clear">Clear</button></p>
</form>
</div>
</section>
</body>
</htm
You can validate items one at a time, but a more general solution is to write a validate() function. Make your form element look like this:
<form method="post" action="index.xhtml" onsubmit="return validate();">
If the validate() function returns false, the form will not be submitted. It is up to the validate() function to issue prompts, etc.
Sample function:
function validate() {
var error = false,
errmsg="";
if(document.getElementById("username").value==="") {
error = true;
errmsg = "User name may not be blank.\n";
}
if(document.getElementById("password").value==="") {
error = true;
errmsg = "Password may not be blank.\n";
}
if (error) {
alert(errmsg);
return false;
} else {
return true;
}
} // validate
I want to create some popup that will tell user when he doesn't enter name, lastname, number or email.
HTML :
<div class="form-group">
<label class="label-block" for="cname" data-new-placeholder="What is your name?">Ime</label>
<input name="firstName" minlength="3" type="text" required class="texbox">
</div>
<div class="form-group">
<label class="label-block" for="cemail">Email</label>
<input name="ctct" type="email" required="required" required class="texbox">
</div>
</div>
<div class=" col-md-6">
<div class="form-group">
<label class="label-block">Prezime</label>
<input name="lastName" type="text" required class="texbox">
</div>
<div class="form-group">
<label class="label-block">Telefon</label>
<input name="number" type="digits" required class="texbox">
</div>
</div>
JS :
<script src="scripts/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function () {
$("#configuration-form").validate({
messages: {
name: {
required: "Error!"
}
}
});
});
</script>
<script>
$("#commentForm").validate();
</script>
That is my code in html and css... I managed to make my textbox turns red when the email is not ok. how to create that popup text.
It looks like you are using Twitter Bootstrap, and they have a popover feature or alert message that you can use: Bootstrap - popovers
HTML :-
Validation for Email.
<input type="text" id="email">
<input type="submit" onclick="validateEmail()" >
JavaScript Code :-
function validateEmail() {
var emailText = document.getElementById('email').value;
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*#[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if (pattern.test(emailText)) {
return true;
} else {
alert('Bad email address: ' + emailText);
document.getElementById("email").style.backgroundColor = "Red";
return false;
}
}
Working Demo for Email Validation.
I hope it will help you.