We Keep Coding

Change bootstrap form based on the users active input. Display a change in the form only based on the text entered and no button clicks

Like credit card logo pops up as you enter in your credit card number. Instead of a logo I want to display a change in the form without a button click. Form automatically detects change after the input field has been filled.

Simple example:
In Angularjs
$scope.changeStyle=function(){
$scope.color="red";
}
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="someName" ng-change="changeStyle()" id="exampleInputEmail1" ng-style="{'color':color}"
placeholder="Email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

angularJs check if input is entered

I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.

I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>

AngularJS validation for ng-repeat form items

I am looking for some guidance.
Here is some code I have:
<div ng-repeat="q in questions">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title"><span ng-bind="q.questionText"></span></h3>
</div>
<div class="panel-body">
<answer-field question="q"></answer-field>
</div>
</div>
</div>
answer-field is a directive, and essentially depending on what q is a certain type of form field will be displayed like a select box or an input text box, etc.
For example, the select box might be:
<div class='form-group'>
<select class='form-control' ng-model='question.answer' ng-options='item for item in question.choices' required>
<option value=''>Select an option...</option>
</select>
</div>
And the text field might be:
<div class='form-group'>
<input class='form-control' type='text' ng-model='question.answer' required />
</div>
As you can see, I have added required and this does technically work. The browser will show an error saying I need to fill out that field if I try to submit.
What I would like though is something a little more aesthetically pleasing. Bootstrap has has-error for example. It would be nice if instead of the default browser "fill out this field" message if I could make the form-group display has-error - and ideally display somewhere a list of the items that do indeed have an error.
How can I go about this?

Angular has novalidate. It suppresses the native HTML validation, allowing you to put in your own. As for how to show custom errors, it's also in that page.

I often like to display custom error messages as follows:
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" ng-model="user.password" placeholder="Password" required>
</div>
<div class="form-group has-error">
<p class="help-block" ng-show="form.password.$error.required && submitted">
Please enter password.
</p>
</div>
or you can use ng-class to append the has-error class to the first div based on the expression

Parsley.js - Understanding and erroring on groups

I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.
For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.
Is this possible without writing custom javascript to parse the form data manually?

You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.
What you can use, without adding custom javascript, is data-parsley-errors-container.
You should apply this attribute on every field where you want to group the error messages. You should use something like this:
data-parsley-errors-container="#element"
Where element is the id of the element where the messages will be displayed.
Here is an example on how you should create your form (jsfiddle available):
<form class="form-inline" role="form" id="myForm">
<div class="form-group col-xs-12">
<input type="text" class="form-control col-xs-3" id="field1" required
placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field2" required
placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
<input type="text" class="form-control col-xs-3" id="field3" required
placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
</div>
<div class="form-group">
<div id="listFieldError"></div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>

want my form's values to show in another div after clicking submit

I have a ticket form and when they click buy, I would like it to be saved and shown in another div as "user's ticket information" plus they are also able to buy a new ticket and add to the old one after. It doesn't have to be saved in a database or anything, for example when you click refresh all info would go away and you can start from fresh. Another example of how I do it is when I sign up, the user information will go to my memory class. Any javascript/jquery/html will help. Bellow is a start of what im working at. Thanks ^^
<html>
<body>
<form id="buyTicket" action="" method="POST">
<div id="ticketHeader">Buy Your ticket here</div><br></br>
<div>Number of persons :<input type="number" required id="numberOP" value="" placeholder="number of persons"/></div>
<div>Flight Destination:<input type="text" required id="destination" value="" placeholder="hawaii/thailand/spain"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" value="" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" value="" placeholder="enter return date"/></div>
<div><button type="submit" class="button" id="buttonTicket">Buy Ticket</button></div>
</form>
</body>
</html>

Like ben said use .val() http://api.jquery.com/val/ to get the values. Here is a working example http://jsfiddle.net/YNez9/
You will have the div, which shows the selected values floating to the right
<div id="result" style="float:right;">
</div>
and on submit you want to add the values entered\ or have a placeholder that you can set its value then make it visible
$('#buyTicket').submit(function() {
$('#result').append('<div>Number of persons :'+$('#numberOP').val()+'</div>');
//.....
//return false;
});​

You can use the val() function to get the values from the form once the button is clicked. Api documentation available here: http://api.jquery.com/val/. Perhaps in something a bit like this:
$('#buttonTicket').click(function() {
$('#ticketinfoheader').text($('#numberOfPersons').val());
});