I am new to angular js. please help me with the below issue
I have a form with a controller loginController. I have two text boxes user.email and user.password.
I want to post the data to servlet onclick of the Log in button.
I have written the following code, but when i click Log in, the data is not getting posted on to the server. Also there is no error message.
Below is my JSP file
`
<html ng-app="practiceApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel ="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="practice.js"></script>
<form name='login' ng-controller='loginController' ng-submit="login()">
<div>
{{hello}}
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required/>
<span ng-show='login.email.$dirty && login.email.$error.required'>Required</span>
<span ng-show='login.email.$dirty && login.email.$error.email'>Not a valid email</span>
<label>Password</label>
<input type="password" name="password" ng-model="user.password" required/><br/>
<span ng-show='login.password.$dirty && login.password.$error.required'>Required</span>
<button ng-disabled="login.$invalid">Log in</button>
</div>
</form>
</body>
</html>
`
JavaScript File
`
var app = angular.module('practiceApp',[]);
app.controller('loginController',function($scope,$http){
$scope.login = function(){
$http({
method: 'POST',
url:'/login',
headers:{'Content-Type':'application/json'},
data:$scope.user
}).success(function(data){
$scope.status=data;
});
}
});
`
I have tried all the solutions that are available but couldn't find any result.. Kindly help on this
Your <button> does not cause the form to submit. Change to <input type="submit" ng-disabled="login.$invalid">Log in</button> or remove ng-submit from the form and add ng-click="login()" to the <button>.
Related
So, I have the HTML & CSS code already, but I need to make it so when you click button, it checks the contents of the input boxes and if equal to
Username = damon
Password = password
it lets you redirects to chat.html and if its wrong it does alert("wrong").
(I dont know JavaScript so I'm asking here.)
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<input placeholder="username" type="text" >
<input placeholder="password" type="password" id="password">
<button type="button" onclick="" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
db.js is empty and main.js has
function clickHandler() {
if (username === 'damon' && password === 'poop'){
window.location.replace("chat.html");
} else {
alert('Wrong!')
}
}
Hardcoding or doing user login checks on client side is not recommended as anyone can read the source and find out your login credentials.
But just assume that you just wanted to learn and try it out. You may do it like this.
Inline Onclick Function Call:
//this is main.js
function clickHandler() {
if (document.getElementById("username").value === "damon" && document.getElementById("password").value === 'poop'){
console.log("redirect to chat.html");
//window.location.replace("chat.html");
} else {
alert('Wrong!');
}
}
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="content">
<div class="login">
<h1>Login</h1>
<!--Added id="username" to below input-->
<input placeholder="username" id="username" type="text" >
<input placeholder="password" id="password" type="password">
<!--You may use inline onclick to call clickHandler function-->
<button type="button" onclick="clickHandler()" id="enter">ENTER</button>
</div>
</div>
</body>
<script src="script/db.js"></script>
<script src="script/main.js"></script>
</html>
Or you may do it by attaching onclick listener to the button to call function.
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>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="login.css"> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<div class="container">
<div class="login_logo">
</div>
<div class="form_container" ng-controller="loginCtrl" >
<div class="error_msg" ng-if="form_login.username.$dirty" ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Username and password are required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
<div class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></div>
<div class="psw"><input id="password" name="password" ng-model="password" type="password" required /></div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()">submit</a>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
var app=angular.module("loginApp",["ngMessages"]);
app.controller("loginCtrl", function($scope){
$scope.username = "";
$scope.password = "";
$scope.submitForm=function(){
};
});
</script>
</body>
</html>
Now I have a login page as it shows above, I'm trying to do the validation with ngMessages
If I have to use <a> which is outside of form to submit it instead of button, how should I do?
How can I make sure error messages are displayed when username or password is empty, and only after user submit the form.
How to prevent user from resubmitting form with <a>?
To show error messages only after form submit, add a variable '$scope.submitted = true;'.
In order to prevent re-submit submit button can be disabled.
Please refer following link for detailed explanation.
https://scotch.io/tutorials/angularjs-form-validation
Hope it helps.
You can check the validation result in your controller function with:
if ($scope.form_login.$valid) {
...
}
The form in angularjs will be validated auto. For all form members you can check the doc
I have found a nice form validation plugin in this website:http://formvalidator.net/index.html
While I was trying to implement server-side validation, the plugin doesn't seems to work. It states that it would send the url via POST method to the url that I have declared in the attribute data-validation-url.However when I tried to echo the post variable, it doesn't seems to show in the web browser.
Could someone help to look into it? Maybe I might have done something wrong somewhere. Apologies, I am quite new to programming! :)
Take a look at this page section:http://formvalidator.net/index.html#security-validators
FormValidate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="form-validator/jquery.form-validator.min.js"></script>
<script>
$.validate
({
modules : 'security',
onModulesLoaded : function()
{
$('input[name="pass"]').displayPasswordStrength();
}
});
</script>
</head>
<body>
<form action="" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php" />
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p><i>Hint: A strong password consists of 13 alphanumeric characters.</i></p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
validate.php
<?php
$response = array(
'valid' => false,
'message' => 'Post argument "user" is missing.'
);
if( isset($_POST['user']) ) {
echo $_POST['user'] //value not echoed in the browser :/
}
echo json_encode($response);
EDITED: I missed completely a slash in the input of the username, and that was the problem, test it now, now it fires the post request.
You only need to add method post on the form.
Try to use proper indentation it's easier to read and no one will blame you for doing it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$.validate({
modules : 'security',
onModulesLoaded : function() {
var optionalConfig = {
fontSize: '12pt',
padding: '4px',
bad : 'Very bad',
weak : 'Weak',
good : 'Good',
strong : 'Strong'
};
$('input[name="pass"]').displayPasswordStrength(optionalConfig);
}
});
</script>
</head>
<body>
<form action="/login" id='form'>
<p>
<label>User name:</label>
<input name="user" data-validation="server" data-validation-url="validateInput.php">
</p>
<p>
<label>Password:</label>
<input name="pass" data-validation="strength" data-validation-strength="2" type="password">
</p>
<p>
<i>Hint: A strong password consists of 13 alphanumeric characters.</i>
</p>
<label> Confirm password:</label>
<input name="pass_confirmation" data-validation="confirmation" type='password'>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
Check this out, seems to be working fine.
Good Luck.
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!