I have two textfields in HTML, when a button is clicked, I need to check that they are not empty.
but I have one working , my second one is not working,
here the code :
<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>appLounge webService</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/demo2.css" />
<script type='text/javascript'>
function notEmpty(login, password, helperMsg){
if(login.value.length == 0){
alert(helperMsg);
login.focus();
return false;
}
if(password.value.length == 0){
alert(helperMsg);
password.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container_12">
<!-- login data -->
<div id="header" class="grid_12" style="background : url(img/login.png) no-repeat; background-size: 100%; height: 900px;" >
<form>
<div id="fieldLogin1">
<input type="text" id='req1' name="userName" style="width:530px; height:44px" placeholder="UserName"; /><br />
</div>
<div class="clear"> </div>
<div id="fieldLogin2">
<input type="text" id='req2' name="password" style="width:530px; height:44px" placeholder="Password" />
</div>
<div class="clear"> </div>
<div id="checkBoxRememberMe">
<input type="checkbox" name="remember" value="rememberYes" /> <br />
<form>
<input type='button'
onclick="notEmpty(document.getElementById('req1'), 'req2','Please Enter a Value')"
value='Check Field' />
</form>
</div>
</div> <!-- end .grid_12 -->
<div class="clear"> </div>
</form>
</div>
<!-- end .container_12 -->
</body>
</html>
I have tried
onclick="notEmpty(document.getElementById('req1'), ('req2'),'Please Enter a Value')"
as well, but not working either, is this the problem?,
Thanks a lot!
onclick="notEmpty(document.getElementById('req1'), 'req2','Please Enter a Value')"
value='Check Field' />
should actually be
onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')"
value='Check Field' />
EDIT (suggested by #dante):
The following code can be more readable:
onclick="notEmpty('req1', 'req2', 'Please Enter a Value')"
value='Check Field' />
and
function notEmpty(loginId, passwordId, helperMsg) {
var login = document.getElementById(loginId);
if (!login.value.length) {
alert(helperMsg);
login.focus();
return false;
}
var password = document.getElementById(passwordId);
if (!password.value.length) {
alert(helperMsg);
password.focus();
return false;
}
return true;
}
(On a sidenote, get used to using === rather than == whenever possible, so you don't end up successfully (ahem...) comparing a boolean value to 0 one day. It is also a bit faster :))
You are passing a string as the second parameter to not Empty. Try this:
onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')"
You forgot document.getElementById() on your password field when you call the function:
onclick="notEmpty(document.getElementById('req1'), document.getElementById('req2'),'Please Enter a Value')"
Related
I have a form in Angular JS 1.5.11.
I have it set up to show an error message for empty required fields on form submit. I need to add the ability to also detect if an email is valid on submit.
So far, I can't get this to work. I tried using the "built-in" email field validation, the tried an ng-pattern. Still, no matter what you type in the field, it shows no error. Only the empty field show an error.
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
<p class="help-block error-block">Enter a valid email address.</p>
</div>
</div>
</div>
See the whole form at https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview
Update
To clarify, I am using novalidate because I don't want to use the HTML5 built-in error message. If I remove that, I get
instead of
First of all, sorry for misinterpreting the question. For getting the state of any input feild inside a form, You could use $valid state for that. Like for your form, you could call like {{abc.myForm.email.$valid}} inside your form and this would return true or false.
See, type email is HTML5 property and if you put no validate in form, default validation of HTML5 will not work. Remove novalidate from form and use it.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as abc">
<p>Hello {{abc.name}}!</p>
<form name="abc.myForm" ng-submit="abc.save(abc.user)" >
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern) }">
<label>Email</label>
<input ng-pattern = '/^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="abc.user.email" required="" />
<p class="help-block error-block">Enter a valid email address.</p>
</div>
</div>
</div>
<p ng-show="abc.myForm.email.$error.pattern">
Not valid email!
</p>
<input type="submit" class="btn btn-primary">
</form>
</body>
</html>
I am getting a really weird behaviour where I noticed that jquery only executes if there is a dummy javascript prior to it.
With javascript (with alerts command) coded before the jquery scripts
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="true" language="java" />
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
alert('x');
</script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<br />
<br />
<br />
<header>
<div id="header-center-11x12">
<img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
alt="goeasyhome" />
</div>
</header>
<br />
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
Password? </a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
When i submit without any data e.g. no email address, the correct validation message pops up as shown below.
With javascripts (alerts command) commented out.
<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<!-- <script type="text/javascript">
alert('x');
</script> -->
<script type="text/javascript">
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
:
:
You'll noticed the default message 'Please fill in this field' instead of the 'Please fill in this field 2' is displayed. The jquery command didn't run.
This is bizzare to me.
Any help would be great.
Here's the jsfiddle https://jsfiddle.net/yapkm01/3f321g84/
Refer the jquery to the code. I've pasted the whole page here. It works great. Please let me know.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main-content">
<form method="post" action="j_security_check">
<div id="email">
<input type="email" placeholder="Email Address" name="j_username"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}"
required="required" />
</div>
<div id="password">
<input type="password" placeholder="Password" name="j_password"
required="required" />
</div>
<br />
<div id="signin">
<input type="submit" value="Sign In" />
</div>
</form>
<br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">
Forgot
Password?
</a> <a class="passwdsignup-color signup-position"
href="/signup.jsp">Sign Up?</a>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<script type="text/javascript">
//alert('x');
$(document).ready(function() {
$('input[name="j_username"]').focus();
$('#email input').on("invalid", function(event) {
if (!$(this).val()) {
this.setCustomValidity("Please fill in this field 2");
} else {
this.setCustomValidity("Please enter a valid email address 2");
}
});
$('#email input').on("change", function(event) {
if ($(this).val()) {
this.setCustomValidity("");
}
});
});
</script>
</body>
</html>
I have form validation setup and working as you can see (using javascript), the only problem is that when someone successfully logs in, I have it redirect to login.php but if someone directly visits mysite.com/login.php they don't need a password to login. If there is any type of php code I need to add then that's fine, another option would be to change the function for the javascript on a successful login. Any info will help!
I have a password only form; here is my code:
<!doctype html>
<html>
<head>
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/account.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<title>The Order of Aztec</title>
</head>
<body>
<div id="page" align="center">
<br /><br /><br />
<div align="center"><img src="images/aztec-logo.png" width="256" height="198" alt="Aztec"/></div>
<br /><br /><br /><br /><br />
<div id="error-division"></div>
<br />
<form id="myForm" align="center">
<div align="center"><input placeholder="Password" name="pword" id="pword" type="password" /></div>
<br />
<div align="center" id="agree-box"><input id="agree-box-input" onClick="login();return false;" type="checkbox">Agree that you are part of the steam group "The order of aztec."</input></div>
<br />
<div align="center"><input id="submit" type="submit" /></div>
</form>
<div id="ack"></div>
</div>
</body>
<script type="text/javascript">
function login()
{
var pass = document.getElementById('pword');
var corpass = "t";
var agree = document.getElementById('agree-box-input');
if(pass.value == corpass && agree.checked == true)
{
window.location = "login.php"
} else {
document.getElementById("error-division").innerHTML = "Wrong password or agreement not checked. Please try again.";
}
}
</script>
</html>
add if statement in your login.php
<?php
if(isset($_POST['your_username']) && isset($_POST['your_password'])){
// do your activities
}else{ ?>
<script type="Javascript">
alert("Your username / password is incorrect");
window.location = "your_validation_page.php";
</script>
<?php } ?>
I am creating an app to send an object to a class in Parse, but the data in the form is being passed and nothing happens. I can submit data directly from the function showAlert, but no alert appears after setNotification and and showALert is used. Here is my code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide</li>
<li>Parse JavaScript API Documentation</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>You're message has now been submited.'</p>
</div>
</div>
<div class="login">
<form class="login-form" name="login-form">
<h2>Compose Message</h2>
<input type="text" name="school" id="school" placeholder="School Code" />
<p> </p>
<input type="text" name="name" id="name" placeholder="Name" />
<p> </p>
<input type="text" name="password" id="password" placeholder="Message" />
<p> </p>
<input type="button" value="Set Notification" onClick="setMessage();">
<p> </p>
<input type="button" value="Send Notification" onClick="showAlert();">
</form>
</div>
<script type="text/javascript">
function setMessage (){
var textField = form.school.value
var textField1 = form.name.value
var textField2 = form.password.value
}
function showAlert() {
Parse.initialize("appkey", "javascript key");
var TestObject = Parse.Object.extend(textField);
var testObject = new TestObject();
testObject.save({teacher: textField1), message:textField2)}, {
success: function(object) {
$(".success").show();
alert('The Message has been sent!');
},
error: function(model, error) {
$(".error").show();
alert('There has been an error.');
}
});
}
</script>
</body>
</html>
I am dusting off my Javascript knowledge to create an page that syncs to an iOS app. Any help is greatly appreciated!
Hey guys so I cant get a jquery plugin to work - timepicker - I have a datepicker already set up and working. I have researched this for many hours, I have tried different plugins. Procedure that I am doing....downloading the plugin, importing .js file to my projects resources/js folder (I am using spring by the way), I then copy the .css file (of the timepicker) to the resources/css folder. I then add a script below the script that imports the standard jquery library to import the plugin...below you can see how I implemented it. Thank you for the help.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery- ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/resources/js/jquery.timepicker.min.js" />'></script>
<script>
$(function() {
$("#dateStart").datepicker();
$("#dateEnd").datepicker();
});
</script>
<script>
$(function() {
$('.timeStart').timepicker();
});
</script>
</head>
<body>
<div id='header-container'>
<div id='header-content'>
<a href='<c:url value="/" />'>414Cal</a>
<div id='header-content-right'>
<a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
</div>
</div>
</div>
<div id='body-content'>
<h1>
414Cal Event Creator
</h1>
<c:if test="${!empty username}">
${username = "User"}
</c:if>
<h3>
${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
<p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
<p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
<p><textarea name='eventDescription' rows='5' cols='42' placeholder='Description'></textarea></p>
<p>Start<input type='text' name='dateStart' id='dateStart' /> <input type='text' name='.timeStart' id='.timeStart' /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
<p><input type='checkbox' name='allDay'> All day</p>
<p><input type='checkbox' name='repeat' id='repeat'> Repeat</p>
<p><input type='submit' /></p>
</form>
}
</div>
</body>
</html>
The HTML elements that you're initializing datepicker on do not appear in your JSP file.
here is the updated code, thank you
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>Home</title>
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/styles.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery- ui-1.10.3.custom.min.css" />' />
<link rel='stylesheet' type='text/css' href='<c:url value="/resources/css/jquery.timepicker.css" />' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>></script>
<script src='<c:url value="/resources/js/jquery-ui-1.10.3.custom.min.js" />'></script>
<script src='<c:url value="/jquery.timepicker.min.js" />'></script>
<script type="text/javascript" src="js/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css" />
<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />
<script>
$(function() {
$("#dateStart").datepicker();
$("#dateEnd").datepicker();
});
$(function() {
$('timestart').timepicker();
});
</script>
</head>
<body>
<div id='header-container'>
<div id='header-content'>
<a href='<c:url value="/" />'>414Cal</a>
<div id='header-content-right'>
<a href='<c:url value="/signout" />'>Sign Out, ${ user.email }</a>
</div>
</div>
</div>
<div id='body-content'>
<h1>
414Cal Event Creator
</h1>
<c:if test="${!empty username}">
${username = "User"}
</c:if>
<h3>
${username}
</h3>
<form action='<c:url value="/createEvent" />' method='post'>
<p><input type='text' name='eventTitle' size='58' placeholder='Title' /></p>
<p><input type='text' name='eventLocation' size='58' placeholder='Location' /></p>
<p><textarea name='eventDescription' rows='5' cols='42' placeholder='Description'></textarea></p>
<p>Start<input type='text' name='dateStart' id='dateStart' /> <input id="timestart" type="text" class="time" /> to <input type='text' name='dateEnd' id='dateEnd' /></p>
<p><input type='checkbox' name='allDay'> All day</p>
<p><input type='checkbox' name='repeat' id='repeat'> Repeat</p>
<p><input type='submit' /></p>
</form>
</div>
</body>
</html>
Just saw this at the bottom of the console right after I load the jsp page. Thank you
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/jquery.timepicker.min.js] in DispatcherServlet with name 'appServlet'
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/js/jquery.timepicker.js] in DispatcherServlet with name 'appServlet'
WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/calendar/css/jquery.timepicker.css] in DispatcherServlet with name 'appServlet'