angular, validate single input (not inside form) - javascript

I am trying to validate a single input to check numbers 1-99, I am wondering if I can do this in angular without having it wrapped in a form. Not a problem if it needs a form, just curious if it has to have it. Here's what I'm attempting -
<div class="errorMulti" ng-show="multiAdd.$error.maxlength">Error</div>
<input type='text' ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
Pretty straight forward, but doesn't seem to work. Any insight? thanks!

<div ng-app>
<form name="myform">
<div class="errorMulti" ng-show="myform.multiAdd.$error.maxlength">Error</div>
<input type='text' name="multiAdd" ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
</form>
</div>
Check the JSfiddle: http://jsfiddle.net/15ugz6j3/

Related

How to clone form fields without their values?

How to clone following html without persisting the field values?
<form method=POST action="/url">
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[1][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[1][body]" placeholder="Possible answer">
</div>
<div class="form-group" data-answer>
<div class="pull-left"><label><input type="checkbox" name="answer[2][is_correct]" value="true"> Correct Answer</label></div>
<div class="pull-right">
</span>
</div>
<input type="text" class="form-control" name="answer[2][body]" placeholder="Possible answer">
</div>
. . .
<button type="submit">Submit</button>
</form>
I can see only 3 possible choices here. However, all of them come with major flaws:
.clone() the .form-field normally and reset the field values.
Problem: resetting all the values one by one is cumbersome and is not a future-proof solution. For example, if more fields are added into the .form-group, their values will need to be cleared separately.
Include a hidden .form-group as a template on the page.
Problem: as you see, the input fields contain enumerated names like: answer[1][body]. It is convenient to clone the last .form-group and just increment the value by 1. Cloning the templated .form-group will be lacking this flexibility.
Read the fields as raw html and transform them into JQuery object
Problem: this seems to be a clear solution to me, however I couldn't get it working. The code $.parseHTML($('.form-group').html()) does not return a valid JQuery object, which I need to use .find() and other methods on.
What will be an effective and elegant solution to this problem?
Try this code:
$("button").click(function(){
var t = $("form").clone().appendTo("#clonedForm");
$(t).find("input[type=checkbox],input[type=text], textarea").removeAttr("checked").val('');
});

AngularJS form validatation of auto-generated form

I am trying to validate an auto-generated form (via AngularJS v1.3) which inputs' names are in format:
form_name[field_name]
The very basic example would be:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
</form>
As you can see, the input name is morgageCalculator[homeValue]. Now I would like to add an error message below it:
<div class="error"
data-ng-show="!morgageCalculator.morgageCalculator[homeValue].$pristine && morgageCalculator.morgageCalculator[homeValue].$invalid">
Please enter a number
</div>
For very obvious syntax reasons this expression is not valid:
morgageCalculator.morgageCalculator[homeValue].$pristine
But this one also does not work:
morgageCalculator["morgageCalculator[homeValue]"].$pristine
So, the question, is there any sane way of accessing those fields? I wouldn't mind moving the validation to some controller function, but I was faced with same issue of inability to access field object.
Any help/hint would be greatly appreciated.
With help of #dfsq from comment section, I was able to find the error. Unlike my SO question, my code was missing data-ng-model.
Validation will not fire at all if input was not bound to model....
The correct snippet:
<form name="morgageCalculator">
<input type="text" class="form-control"
name="morgageCalculator[homeValue]" value="0"
data-ng-model="data.homeValue" required="required"/>
<div class="error"
data-ng-show="!morgageCalculator['morgageCalculator[homeValue]'].$pristine && morgageCalculator['morgageCalculator[homeValue]'].$invalid">
Please enter a number
</div>
</form>

Parsley.js 2.0.2 require not working, but other validation works

Since this has already wasted a day and a half of my life, I am bringing it to the community someone can save me while I still have some hair left to pull out.
I am attempting to use parsley.js and it actually works for the most part, except when I simply want to do something as basic as requiring that a field has ANY value.
I know that Parsley.js is loading, and I know its working, because for example, if its looking for an email address, and I add one character to the field and submit it, the form stops the submit and correctly outputs an error message indicating I must have an email in the field. As I type an email, the validation works and turns green as soon as a valid email is recognized. So it works just fine for that part. The problem is that despite me indicating that the field is required, parsley seems to let the form submit if there is no value in the field. I would like it to throw an error if the field is blank, thats the part thats not working. But even putting one character in the field causes the rest of the validation to work, but a blank field slides right through. Please let me know any ideas you all have.
<form role="form" action="" method="POST" class="parsley-validate">
<div class="form-group">
<label>Email:</label>
<input type="text" data-parsley-require="true" data-parsley-type="email" class="form-control">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
Seems basic enough right? I can not possibly figure out why the require is not working. Maybe someone with more parsley experience can help me out with a trick that I am not seeing.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="parsley.min.js"></script>
<script>
$('.parsley-validate').parsley();
</script>
Obviously I call parsley on the form as well & load jquery, like I said, if i add a character in the field it will validate. But for some reason if the field is empty it goes through.
You have a typo - the attribute should be "data-parsley-required" not "data-parsley-require". You can find working example here http://jsfiddle.net/2p7Pz/
<form role="form" action="" method="POST" class="parsley-validate">
<div class="form-group">
<label>Email:</label>
<input type="text" data-parsley-required="true" data-parsley-type="email" class="form-control" />
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>

form validations drop ng-model objects?

Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?
at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.

AngularJS - ng-model not working with bootstrap directives

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.
I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?
<form role='form' action='#/app/register_db' method='post'>
<h1><small><b>Sign Up Information<b></small></h1>
<br>
<input type='text' ng-model='num'>
<h1>{{num}}</h1>
<div class='row'>
<input type='text' ng-model='num2'>
<h1>{{num2}}</h1>
<div class='col-xs-5'>
<input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
</div>
</div>
...
...
I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.
I am using angularJS and Bootstrap CSS.
Thanks.
You should get the following error message in your browser's console:
[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">
As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

Categories