We Keep Coding

Auto complete input field mandatory in form

I have one field and i want to make it as mandatory on form submit.
here is the code:
<div class="form-group">
<form name="addressform">
<span><small><strong> choose Location : </small></strong></span>
<div>
<input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/>
</form>
<div ng-show="showMap">
<div id="location_map_canvas" style="width:100%;height:200px"> </div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" ng-submit value="create" ng-disabled="frm.$invalid" class="btn btn-primary btn-block" ng-click="createt()">
</div>

Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.create = function() {
console.log("submitting..");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="addressform" ng-submit="addressform.$valid && create()" novalidate>
<span ng-show="submitted == true && addressform.address.$error.required">Required field.</span>
<div class="form-group">
<input type="text" name="address" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" required/>
</div>
<div class="form-group">
<input type="submit" value="create" class="btn btn-primary btn-block" ng-click="submitted = true">
</div>
</form>
</div>

<input name="movie" type="text" required />
This is how you would make an input text field required.

Take a look at ngRequired
<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="required"/>

Use ng-required="true" as follows:
<input type="text" id="LocationAutocomplete" class="form-control" ng-autocomplete="result1" ng-model="addressTemp" ng-required="true" name="input"/>
<input type="submit" ng-disabled="myform.input.$error.required">Submit</input>

use angularjs form validation
https://docs.angularjs.org/guide/forms - https://docs.angularjs.org/api/ng/type/form.FormController with ng-message and (https://docs.angularjs.org/api/ngMessages/directive/ngMessages)
if you want in submit(ng-submit="checkAndSave")..
do in controller..
$scope.checkAndSave = function(){
// validations code if ok do save else throw whatever you want
}

Add the form tag, and name the form and all of your inputs
<form name="form" ng-submit="submitform()">
<input name="addres" type="text" id="LocationAutocomplete" class="form-control" ng-model="addressTemp" required/>
<button type="submit" ng-disabled="form.$invalid"> Submit </button>
</form>
With this, you will have the Submit button disabled if the input is Invalid.
since it has the required attribute, if the input is blank it will appear as invalid.
Find this working sample:
https://plnkr.co/edit/F0Id7HDm9pkrCTTG42U5?p=preview

Can we use angular input validation without form

Is there a way to use angular input validation without form. See angular plunker. When I change <form name="myForm"> by <div name="myForm"> the validation does not work anymore.
HTML :
<form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="user.name" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span>
</div>
<label>
Last name:
<input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
</label>
<div role="alert">
<span class="error" ng-show="myForm.lastName.$error.minlength">Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">Too long!</span>
</div>
</form>

You need to have form directive because ngModel searches its controller in order to register itself and leverage validation capabilities.
If for layout reasons you can't have form tag (nested <form> tags are invalid) then you can use ngForm directive to achieve the same effect:
<ng-form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="user.name" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.userName.$error.required">
Required!</span>
</div>
<label>
Last name:
<input type="text" name="lastName" ng-model="user.last"
ng-minlength="3" ng-maxlength="10">
</label>
<div role="alert">
<span class="error" ng-show="myForm.lastName.$error.minlength">
Too short!</span>
<span class="error" ng-show="myForm.lastName.$error.maxlength">
Too long!</span>
</div>
</ng-form>
Demo: https://plnkr.co/edit/WlCqNBWtqiGerkQy0Wad?p=preview

Angular Js : error message get displayed utill page load completes

Below is Html code of form. The only issue here is, the error message get displayed until page load completes.
Any suggestion?
Edit
I am sharing video link of this issue
https://vimeo.com/142634090
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
<form ng-app="myApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Email is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
<div class="box-footer-custom">
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
</div>
</form>

#Yann Lelong, the code will work the way #Arvind Jha wants as long as the javascript is loaded before the html such as in your example. But based on what Arvind said, it seems that the javascript code is being loaded afterwards and not immediately (possible because of server slowness or network speed).
I took Yann's Plnkr and modified it to simulate what can happen if the javascript code isn't loaded right away and I was replicate the issue. The way to fix it is by adding the ng-cloak attribute to those elements that you want to hide before angular has a change to fully load up.
Given that the css rules for ng-cloak are in angular.js, it is also advisable to manually add the styling rules for the ngCloak in the head of the html
<head>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
And the components that you want to hide with ng-cloak:
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-cloak ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Name is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-cloak ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
Here the plnkr with my changes: http://plnkr.co/edit/iKFohNLbRD8zghdzBvuC?p=preview

It seems that your code is actually working the way you want it. I simply copy/pasted it in this Plunker and it worked.
index.hmtl
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<form ng-app="validationApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Name is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
<div class="box-footer-custom">
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
</div>
</form>
</body>
</html>
app.js
// create angular app
var app = angular.module('validationApp', []);
// create angular controller
app.controller('validateCtrl', function($scope) {
});
What you can do is check your HTML header to make sure you properly included the mandatory scripts : AngularJS and your JS file.

Bootstrap 3 form submission

I'm using bootstrap 3 to build a contact form and I have the following problem: If submitted empty, the form submits to the same page. If i enter values in the boxes, it will redirect to the homepage. This problem only occurs if I'm using a name="something" attribute for the input boxes. Does anyone have any idea why? HTML is this:
<form class="form" method="post" action="http://localhost/contact">
<div class="form-group">
<label for="name">Nume</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Numele tau...">
</div>
<div class="form-group">
<label for="email">Adresa email</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Adresa email...">
</div>
<div class="form-group">
<label for="subject">Subiect</label>
<input type="text" name="subject" class="form-control" id="subject" placeholder="Subiectul mesajului...">
</div>
<div class="form-group">
<label for="message">Mesaj</label>
<textarea class="form-control" name="message" id="message" rows="5" placeholder="Mesajul tau aici..."></textarea>
</div>
<button type="submit" class="btn btn-default">Trimite mesajul!</button>
</form>

You need an action to actually submit the form. The form won't do anything until you add an action to process the form and email it.
<form class="form-horizontal" method="post" action="contactform.php">
I use a variation of this form, http://www.html-form-guide.com/email-form/php-form-to-email.html

AngularJS form validation not showing error message

I'm trying to do form validation with AngularJS but somehow the page won't show my required message.
Can anyone point me in the right direction what I'm missing at this time? I've just picked up AngularJS and I'm trying to write a proof of concept, so we can use this in production.
HTML
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required>
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
JavaScript
function registerController($scope){
$scope.master = {};
$scope.reset = function(){
$scope.register = angular.copy($scope.master);
}
};

As J.Pip stated, the message wasn't shown due to mis formatted HTML code. It should be solved with the code below.
HTML code
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required />
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
</form>