I would like to validate names.
Ex: if I enter vinod98 r vinod_ it should give me an error message.
I want to move to start.js page after enter the name and clicked on participate. Can someone help me to do this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
var reg = /^[a-zA-Z]*$/;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
}
else if (!reg.match(nam))
{
alert("Name contains only letters");
document.forms[0].name.focus();
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br>
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
I rectified the error. Just remove reg in the if statement and then use test method. It works fine
Related
When you click the login button after you enter the correct username and password, it is supposed to redirect you. I posted the same question yesterday, but now I have slightly changed the code like some of the answers said, but it still hasn't worked. Please help.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="submit" value="Login" id="submit" onclick="validate()"/>
</form>
<b><i>Submit</i></b>
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3;
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Joshua" && password == "Joshua#123"){
alert ("Login successfully");
window.location.replace("https://www.youtube.com"); // Redirecting to other page.
}
else{
attempt -= 1;// Decrementing by one.
alert("Incorrect username or password")
alert("You have "+attempt+" attempt(s) left;");
// Disabling fields after 3 attempts.
if( attempt == 0){
alert("Incorrect username or password")
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
});
</script>
<script src="js/login.js"></script>
</body>
</html>
you have to prevent the default behavior of Submitting, and once you do that- you can redirect.
$("form").submit(function(event){ //edited
event.preventDefault()
..your code here
});
While creating login form to welcome page in HTML, CSS, js the problem faced is the return statement is not working.
create code for HTML inbuilt javascript.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="user name">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var user name= document.getElementById("user name").value;
var password= document.getElementById("password").Value;
if(user name.value=="dr" && password.value=="8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>
Using return false statement it should stop entering into welcome page, but in this code it's not working, it goes to next page.
Tried that onsubmit="return false; validate();" while using this code entire block gets stop & won't enter to welcome page.
You are using spaces in your id attribute which is incorrect, the id attribute must not have anykind of spaces. Plus, you are missing id="submit" on the submit button. In your code the JS is unable to execute this line
document.getElementById("submit").disabled = true;
Because the submit button doesn't have any ID.
Below has the errors fixed. This should work
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login" id="submit"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var username= document.getElementById("username").value;
var password= document.getElementById("password").Value;
if(username == "dr" && password == "8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>
The problem was that id was missing in submit, you have to declare id in the input that has type submit. Secondly, the logic was incorrect when you validate the form, return statement was missing in the else part when the attempt was not equal to zero.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var attempt =3;
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "dr" && password == "8428") {
return true;
} else {
attempt--;// Decrementing by one.
alert("You have left " + attempt + " attempt!");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
return false;
}
}
</script>
</head>
<body>
<div class="loginbox">
<h1>Login Here</h1><br>
<form action="/loginbox.html" name="myForm" onsubmit="return validateForm()">
<div>
<p>user name</p>
<input type="text" name="userName" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="password" placeholder="Enter password" id="password">
</div><br>
<input type="submit" id="submit" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
</body>
</html>
I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var input = document.getElementById("search");
function sendToPage(){
if (input.value == "happy"){
location.href="suggestion_happy.html";
}
else if (input.value == "sad"){
location.href="suggestion_sad.html";
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<form onsubmit="sendToPage()">
<input type="text" method="put" id="search" placeholder="Search" value="">
</form>
</div>
</body>
</html>
Please help I'm still kind of new to javascript :)
you don't need to create a form to do this
check out this code
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
location.href = "suggestion_happy.html";
return false;
}
else if (input == "sad"){
location.href = "suggestion_sad.html";
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<input type="text" method="put" id="search" placeholder="Search" value="">
<input type='submit' onclick="sendToPage();" />
</div>
</body>
</html>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
//location.href="suggestion_happy.html";
location.replace("suggestion_happy.html");
return false;
}
else if (input == "sad"){
location.replace("suggestion_sad.html");
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
<div>
<form action="" onsubmit="return sendToPage()" method="post">
<input type="text" id="search" placeholder="Search" value="">
</form>
</div>
I have edited my asnwer plz try this
there are two problems here:
submitting a form will always refresh the page. So onsubmit is
killing your app
by putting the js in the <head> your
document.getElementById call fails because that element doesn't
exist yet. Javascript belongs at the end of the page, just before
the closing </body> tag
My first post here #stackoverflow. Please bear with me.
Look at the code below. I want the javascript to post to an PHP (applybeta.php) document IF there is a '#' in the field with the name & id 'epost'. If there isn't a '#' in the field, a messagebox will pop up telling the user they entered an invalid e-mail address.
If you don't enter a '#' the message box shows up. But if you do enter a valid email it doesn't post to "applybeta.php", nothing happens at all. Anybody got an idea why? Sorry if the description is vague, hopefully you'll figure out what I mean :)
The e-post field got both an id and a name because I tried with both, none of them works.
<!DOCTYPE html>
<html>
<head>
<title>Binärklocka</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<!-- table font --> <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
}
else {
document.getElementById("minForm");
//z.submit();
//alert("hej");
}
}
</script>
<div id="wrap">
<div id="main">
<br>
<br>
<table id="nav">
<tr>
<td>Store</td>
<td>Our Products</td>
<td><img src="home.png" alt="hem" width="60" height="60"/></td>
<td>About Us</td>
<td>Contact</td>
</tr>
</table>
<hr id="linje1" />
</div>
</div>
<p id="binaryclock" onclick="showLink()">
We are looking for beta testers for our newly created clock!<br />
To participate, fill in the forms below with your real name</br />
and a valid e-mail address and a download link will appear.
</p>
<!-- Form that I want to post -->
<div id="applybeta">
<form action="apply.php" method="post" id="minForm" name="minForm">
<input type="text" placeholder="Full name" name="name" /><br />
<!-- checking this field for '#' -->
<input type="text" placeholder="E-mail" id="email" /><br /><br />
<!-- end of field -->
<input onclick="kollaepost()" type="button" name="submit" value="Send" /><br />
</form>
</div>
<!-- End of the form -->
<div id="dlink">
shdgfghClick here to download
</div>
<div id="bottomtext">
<p># 2015 ClockMasters Elite</p>
</div>
</body>
</html>
Instead of having an input of type button, try submit. Your onclick-function can then serve as a validation function by returning true or false, and thus influence whether the form will be submitted. Something like this:
<input onclick="return kollaepost()" type="submit" name="submit" value="Send" />
and:
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
return false;
}
return true;
}
</script>
Also see this question for a more detailed explanation on this method, in general.
You can submit your form using the .submit() method.
var fromElement = document.getElementById("minForm");
formElement.submit();
For further reference, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>