When serving the source files, the following angular form renders correctly and the button submits correctly when pressed (i have reduced the size of the form to keep things concise)
<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group">
<label class="control-label col-md-2" for="price">Price:</label>
<div class="col-md-10">
<input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
</fieldset>
</form>
But after minifying (with Grunt and Usemin) and serving the minified files from the Dist folder, then the form inputs render correctly, but the submit button is simply not there.
The relevant section of the dist/scripts/script.*******.js shows the button html is still present
a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n </fieldset>\r\n \r\n </form>
Clearly the Grunt minification has sent the button to the dist folder, but it just doesn't render, either in chrome or firefox or from heroku.
The only strange thing i can point to are these strange spaces that were inserted into the build file along with a bunch of newlines and carriage returns.
If this is to blame, what can be done? Also, why would the grunt file insert spaces around the button? It also did it in a couple of other areas. But in any case, manually removing the spaces and newlines did not seem to resolve the problem
In another very similar form, the button also doesn't render after minifying. There are also some spaces inserted into that part of the minified scripts file. All other buttons in the app render and function correctly after minifying
My editor is Visual Studio Code
Please help me to see what it is i have done wrong!
I fixed the problem
It was a small mistake in one of the input fields. Not the one i posted above, actually.
I wrote a textarea tag acccidentally as a self-closing tag, in the manner of old input tags
<textarea something something /></textarea>
unminified this was interpreted as i intended it to be, and so of course the error was never detected
but in the minification process it was reduced to
<textarea something something />
which never closed properly and therefore removed some subsequent blocks
so I think I can generalize from this:
the html parser can handle some mistakes before minification, but the minification parser may handle errors differently and afterwards the errors may appear
so any strange post-minification errors should result in careful scrutiny of the html for correct tag formatting
Related
I'm facing a weird issue using bootstrap's inline-form together with a React component.
When using the example data as shown on the official doc's page directly in my rendered output (changing class to className as well as for to htmlFor):
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
inside my page, everything works as expected.
When I copy the same (reactified) code into the render function of my component, the paddings between the inputs are missing somehow.
As it turns out, this issue has somehting to do with how the html/markup is rendered or passed to the browser. From React, the markup is one single string without any indentations (which can be seen through dev-tools).
When removing all the indentations (via dev-tools) from bootstrap's official page, the same thing happens there as well.
Can anyone tell me why this happens and if there is anything I can do, e.g. tell React to indent the output or something?
Note: I'm not using Bootstrap 4. It's the latest in version 3.
When selecting the form element's node in dev-tools, RightClick -> Edit as HTML, the following is shown:
<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>
Which is the unformatted, unindented string causing the issue.
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 am trying to abstract the login form from an html page. Is it possible to have the contents of the form in one file and include the contents into an html page. I am doing this in asp.net, and I would prefer to put the content of the form in a .aspx or .ascx file.
Currently the only way I can think of doing this would be to use some javascript hack which I would prefer to stay away from.
<form id="login">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default btn-block">Sign In</button>
<small>Forgot your password?</small>
</form>
So I want to take labels and inputs and put them in another file. Is it possible to include them into this formusing my .aspx file?
I presume you're using web forms? Because ASP.Net MVC lets you do whatever you want to the html.
In that case, remember that Web Forms has one special form, that normally looks like this:
<html>
<body>
<form id="theForm" runat="server">
<!-- everything goes in here -->
</form>
</body>
</html>
The trick is that Web Forms has two rules about this form: it should be the only form with the runat="server" attribute, and it doesn't like it if you nest another form element inside the special form. However, you are perfectly free to include another form element on the page that's outside of this form element and does not use the runat="server" attribute:
<html>
<body>
<form id="login" action="...">
<!-- login stuff goes here -->
</form>
<form id="theForm" runat="server">
<!-- everything else goes in here -->
</form>
</body>
</html>
And of course you can use css styles to position that new form however you want on the page, within the limits of css.
That out of the way, you're also talking about moving this code to another file. Specifically, it sounds like you're wanting to use an older include directive. Those aren't really considered good practice anymore, but you do have a number of options available. In Web Forms, this could be part of your Master page. In MVC, it might be something like Partial View (scroll down at the link). Additionally, with Web Forms, you could implement this as a user control, where you don't need the form element any more. Instead, you rely on the form from the ASP.Net page, and just supply the server controls and code for the login button.
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
I have an HTML5 form that calls a Perl controller to upload files to the server. It works. The thing is that if no file is selected (if the form box is left blank), and the user clicks the button, he will get a nasty Perl error message ("require file at ... line 39 etc"). I want to add a feature that if the form is left in blank, a message will appear saying "It's empty!". Can this be done only with HTML5, in the view? Or I need to modify my Perl script?
My HTMl5 looks like:
<form action="[% uri_for('/upload/execution') %]" method="post" enctype="multipart/form-data" class="form-horizontal">
<filedset>
<div class="control-group">
<p>
<div class="controls">
<input readonly value="[% article.article_id %]" name="article_id" type="hidden" class="span1" id="game_id">
</div>
</p>
<p>
<div class="form-actions">
<input type="submit" value="upload" class="btn btn-primary">
</div>
</p>
</filedset>
</form>
You can use javascript to validate your request.
See this question, there is a good code sample.
Of course this is only client side validation (ie. it's done in browser), so anyone can turn it off and send the file anyway (although this rarely happens). It would be a good practice to handle this also on a script level.