We Keep Coding

AngularJS: ngMessage weird behavior with input with type "email"

I follow Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages article from Todd Motto's blog and I want to migrate from ng-if to ng-messages. But ng-messages directive behaves very weird when I try to display to user two different messages for <input type="email">: first, when user leave field empty (then required error occurs) and second, when format is wrong (then email error occurs) - it displays both required and mail messages, but my old code displays only one message - about required error - and that is I think welcomed behavior. Here is simplified code:
<form name="ngMessageMailForm">
<input type="email" required="" name="email" ng-model="ctrl.ngMessageMail" />
<div ng-messages="ngMessageMailForm.email.$error" ng-if="ngMessageMailForm.email.$touched">
<span ng-message="email">
E-mail has not proper format<br />
</span>
<span ng-message="required">
E-mail is required<br />
</span>
</div>
</form>
Comparison between old and new code you can find in this Plunker: Ng-if vs ng-messages at plnkr.co, to reproduce weird behavior of ng-message click inside and then outside of mail inputs. You will see one message in case of ng-if form, and two messages in case of ng-message form.
Did I miss something while migrating from ng-if to ng-messages? Thank you in advance for any help.

Everything is fine but you miss to add angular-messages library to your project...
Add its files to your project and inject ngMessages to your angularjs module then you are good to go...
here is update plunker

How to pass parameter on submit button in wordpress / php?

I have a common popup contact form at three different places in a one page wordpress website. Now the issue is that I can't identify from which button the form is sent. I have used easy modal plugin and the form is a normal bootstrap form. How can I identify this? is there something i can do with hidden fields or how? any help is appreciated . Thanks

'is there something i can do with hidden fields or how?' - Yes there is:
<form>
<!-- other input fields -->
<input type="hidden" name="form-id" value="form1">
</form>
On the server side you can get it the same way you get your other variables:
$form = $_GET["form-id"];
//or
$form = $_POST["form-id"];
In a comment you said you are new to this. Have a look at this, it might be helpful.

Try this,
<form action="action.php">
Email: <input type="text" name="name"><br>
<input type="hidden" name="from" value="topModal">
<input type="submit" value="Submit">
</form>
Change the value of topModal to any other word to identify the request of origin.

You can send hidden field in the form to distinguish them all from each other.

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Long form validation in JavaScript / jQuery

I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.

Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!

If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});

Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).

Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/

I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?

External javascript file giving problems

I am new to javascript and working on a small form validation project...I have used external javascript file for this purpose but it is giving me problems.I have included this file properly in my html form but it is not updating any div or changing any color however this file is showing popup alerts.....Another thing is that when I copy and paste the same code directly into my html tags then it works fine......I dont know why this is happening ????
The html tags I have used are actually SPRING HTML tags...Are these tage creating problem????
<label for="edit-mail"> First Name<span class="form-required" title="This field is required.">*</span></label>
<form:input path="firstName" id="firstName" />
<div id="firstNameError"</div>
<form:errors path="firstName"/>
<div id='user-register_FirstName_errorloc' class="error_strings"></div>

Make sure that you're returning false to prevent the default behavior of your button (which is to submit the form:
<input type="submit" name="op" id="edit-submit" value="Next" class="form-submit" onClick="validateForm();return false;">
See the difference here: http://jsfiddle.net/atc3B/