Is it possible to get AngularJS working with Classic ASP? I couldn't find any resources on this, but I suspect the answer would be yes, since AngularJS (excluding its AJAX stuff) is mostly Client Side.
If that is the case, I have a form that looks like this:
How can I use AngularJS to validate this form? The validation I want is:
All Fields Required
Email must be valid format
I know I can use jQuery, but I want to do this with AngularJS. I have already gone ahead and added the AngularJS script to the bottom of the form, also added the ng-app to the <html tag.
I'd like to know the proper, decoupled way of doing this, also if possible, client side end to end test for this simple form, just so that I get the idea.
UPDATE: Thanks to DoubleSharp's link, I have progressed a little, though validation still does not work.
Here is the code I have:
<div class="panel-body" ng-controller="UserCtrl">
<form novalidate class="css-form">
<div class="form-group">
<input type="text" placeholder="First Name" class="form-control" ng-model="user.fname" required />
</div>
<div class="form-group">
<input type="text" placeholder="Last Name" class="form-control" ng-model="user.lname" required />
</div>
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="user.email" required />
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="user.password" required />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
And here is my JavaScript/Angular Code:
function UserCtrl($scope) {
$scope.master= {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
As you can see I simply copying the tutorial, I have also gone ahead and added the CSS styles, but my validation is still not working, even though the page is freshly loaded, I get ng-pristine ng-invalid ng-invalid-required CSS on my text fields, whereas in the tutorial they have ng-valid
I am guessing this has something to do with ngModel which I have no where, but the tutorial does not mention that at all in its code, I'm confused.
If you just want to validate that the required fields are entered and that the email is in a valid format, it can all be done client side without any calls back to the server, so it doesn't matter if it is ASP classic, PHP, etc... it is all in the browser. The AngularJS site has examples of this, so rather than repeating them here...
See this page for implementing custom form validation: http://docs.angularjs.org/guide/forms
See this page for the email input type: http://docs.angularjs.org/api/ng.directive:input.email
Related
I have an HTML form, which consists of few divs, and there are label and input inside every div.
So for name and email inputs I want to add "required" property. But when I set it and then submit the form, I instantly start running the form action, even if my inputs were empty. So that's first time I face with such a trouble. It's also the first time when I put divs inside the form, but it seems like it should work anyway.
So you can see my code below:
<section>
<form id="feedback_form" method="POST" action="{% url 'feedback' %}">
<div class="field half first">
<label for="name">Name*</label>
<input type="text" name="name" id="name" required/>
</div>
<div class="field half">
<label for="email">Email*</label>
<input type="email" name="email" id="email" required/>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<button class="button submit" type="submit">Send</button>
</form>
</section>
So I solved this. It was an issue with some implicit javascript code on page (I usually work with backend, so haven't made this page by myself before).
So in .js file I found such part of script which disallowed submitting form in a standard way.
$('form').on('click', '.submit', function(event) {
event.stopPropagation();
event.preventDefault();
$(this).parents('form').submit();
});
So my advice: if you work with code written by others, do some more research and check files few times if you can't solve some implicit tasks.
How can I both validate the pattern of an input field while use required attribute in an html form. I want to make 2 different warning message for each attribute.
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="Địa chỉ E-Mail" class="form-control" type="text" required
pattern=" /^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/"
oninvalid="this.setCustomValidity('Vui lòng nhập địa chỉ email')"
oninput="setCustomValidity('')"/>
</div>
</div>
</div>
And anyone have a working regex to check valid email? I found that regex on the Internet but it does not work correctly
Keep it simple :o) Unless you really need to go use the Constraint Validation API, as you are currently doing, I would go with regular Form Validation which has pretty good browser support.
Basically when you apply the required attribute on input elements they will be matched against a few conditions. One is the field cannot be left blank. A second is an optional pattern. In your case, you can specify type="email" and the browser will match the input for a valid email address. As far as I can read your request, the following should cover your needs:
<form action="">
<input type="email" required>
<input type="submit">
</form>
The risk of defining a custom pattern using regex is that you might end up testing for a faulty pattern. In your case, testing for example#example.cancerresearch would fail even if it's a valid email address.
I have an ASP.NET MVC site that uses Data Annotations for validations and I'd like to get "free" client-side validations. Most simple ones work well and Foolproof helps me with more complex scenarios. All is good so far.
However, I'd like to tie into HTML5 validations with browser support. Specifically, I want to use the little popups for all of my client-side validation messages.
I've created a JSFiddle example here explaining what I want and am coming from: https://jsfiddle.net/4nftdufu/
The behavior I want to see is shown by the first form (Foo).
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="inputFoo" placeholder="Type Foo Here" required>
</div>
<button type="submit" class="btn btn-primary">Submit Foo</button>
</form>
The second form (Bar) is essentially where I'm coming from. Note that I'm hooking into some Bootstrap validation behavior here (I found that CSS online somewhere in a blog post or some other SO question). Ultimately, this is not the behavior I want and I've not spent any time cleaning up this imperfect integration.
<form class="form-inline">
<div class="form-group">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="inputBar" name="inputBar" placeholder="Enter Bar here" type="text" value="" aria-required="true" aria-describedby="Bar-error" aria-invalid="true">
<p class="help-block"><span class="field-validation-valid" data-valmsg-for="inputBar" data-valmsg-replace="true"></span></p>
</div>
<button type="submit" class="btn btn-primary">Submit Bar</button>
</form>
How can I get my Data Annotations + jQuery Unobtrusive-driven validations to hook into these HTML popups for all validation messages when in a supported browser?
MVC's client side validation using the jquery.validate.js and jquery.validate.unobtrusive.js files and HTML-5 validation do not play well together. The jquery.validate.js file in fact adds the novalidate attribute to your <form> element to disable HTML-5 validation using the following code
// Add novalidate tag if HTML5.
this.attr( "novalidate", "novalidate" );
If you want your messages to look like the browsers callouts, then you can always use css to style the element generated by #Html.ValidationMessageFor(). When a form control is invalid, a class="field-validation-error" is added to the element which can be used for styling (adding color, borders, using the ::after pseudo selector to add arrows etc)
I want to use HTML5 validation in Angular 4 rather than their form's based validation/reactive validation. I want to keep the validation running in the browser.
It used to work in Angular 2, but since I've upgraded, I can't get even manually created forms without any angular directives to validate using HTML5.
For instance, this won't validate in the browser at all:
<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Angular4 automatically adds a novalidate attribute to forms.
To override this, you can add the ngNativeValidate directive to the form.
<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Unfortunately I do not see this reflected in the docs yet, but found it by looking at the source code:
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts
It appears also adding ngNoForm to the form has the same effect as ngNativeValidate depending on your use-cases for needing to declare something as not a form for whatever reason.
Hope this helps.
use ngNoForm or ngNativeValidate in your form
<form ngNoForm/ngNativeValidate>
...
</form>
I'm trying to use the ngShow directive using data from an API call, but can not seem to get it to work properly.
My Controller:
angular.module('app').controller('apiCallController'[$scope,'$http',function($scope,$http{
$http.get(sampleUrl)
.success(function(data){
$scope.sampleData = data
});
}]);
HTML:
<label>User Name: {{sampleData.userName}}</label>
<div ng-show="'{{sampleData.member}}' === 'true'">
<label>Enter Email:</label>
<input type="text">
</div>
When I run the code, all of the data shows up properly when I check the DOM explorer in browser, but the ngShow directive is not working properly. The div does not display even if though the expression is true. Not sure what I'm doing wrong here. Sorry ahead of time for the poor formatting, as you can probably tell this is just a replication of my code.
just remove the curly brackets and single quote
<div ng-show="sampleData.member === 'true'">
<label>Enter Email:</label>
<input type="text">
</div>
if sampleData.member value type is Boolean then remove the equal true also
<div ng-show="sampleData.member">
<label>Enter Email:</label>
<input type="text">
</div>