I am working on a project where AngularJS is used heavily for the front-end. Here is what I have:
The validation rule I want to have is as follows:
The Next button should be disabled unless the reason inputted is at least 10 characters.
Also, I'd like to be able to tell the user how many characters are left before he / she is able to submit. This would go in the bottom right hand corner of the textarea.
CODE:
<form name="paymentForm">
<div class="form-group" id="Div2">
<select ng-model="selectedPaymentStatus" ng-options="ps.name for ps in paymentStatus"></select>
</div><!-- .form_group -->
<div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3">
<p>Reason</p>
<textarea class="form-control" ng-model="crate.paymentDeferredReason" ng-minlength="10"></textarea>
</div><!-- .form_group -->
</form>
<button class="btn wizard-next-btn pull-right" ng-disabled="paymentForm.$valid" ng-click="nextStep()">Next</button>
<button class="btn wizard-back-btn" ng-click="previousStep()">Back</button>
For some reason the above code is not working! Even when I type a single character, the next button gets enabled!
You need to make two corrections:
ng-disabled="paymentForm.$valid" should actually be ng-disabled="paymentForm.$invalid"
Add ng-required="true" to the <textarea>; otherwise ng-minlength seems not to take effect on empty fields.
Also the button being outside the form seems to work ok, but I would recommend against it; I have a feeling it would not work in all cases (but cannot prove it right now :)
Relevant fiddle: http://jsfiddle.net/J2JA6/
Related
I have a question about having two submit buttons on a single form (the two buttons are below). I currently have two buttons, one to submit the login data and attempt to validate the login by running a database query, and the other to bring the user to a page to generate a random string and set it as their new password.
I want to be able to make it so that when I hit enter, the second button (the login process button) is triggered, where it is currently the initial button that is done. I have tried turning the first button from an input to a normal button tag, but the issue still persists. Brief snippet of the buttons below, if the full form would be helpful I can edit it in.
I tried some solutions I found online such as this, but I couldn't get it working - maybe I'm just a bit stupid!
Any and all help is fully appreciated. Thanks in advance.
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, brings user to reset password-->
<input type='submit' class="button is-danger" id='loginRequest' value="Forgot Password" formaction="resetpassword.php">
</p>
</div>
</div>
<div class="column">
<div class="field">
<p class="control">
<!-- if clicked, posts info and attempts to validate login through database-->
<input type='submit' class="button is-primary" id='loginRequest' value="Login" name="requestlogin">
</p>
</div>
</div>
I want to give the user feedback on, for example (but not limited to) the validity of an email field as the user types, i.e. client-side validation.
<div class="form-group">
<label for="email">Email</label>
<div :class="['input-group', validateEmail()]">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-envelope"></i></span>
</div>
<input type="text" v-model="email" placeholder="joe#example.org" class="form-control">
</div>
Before the user types anything, I'd like the field to be uncolored. As she types, the outline becomes red until she has put in a properly formatted email, at which point the outline becomes green. All other input fields should be unaffected by this. Another example might be the password field that becomes green as the requirements/constraints are met.
In bootstrap 3 it was pretty simple to add a has-error or has-success class to an input field via a javascript method per this example https://codepen.io/CSWApps/pen/MmpBjV.
However, it seems that in bootstrap-4 with the shift to HTML5 pseudo-classes :is-valid and :is-invalid it has become a lot more complicated with the necessity to add was-validated or needs-validation to the form tag, and the difficulty in setting those pseudo-classes on a single field via javascript. Am I missing something? Is there a simple way to replicate the bootstrap-3 functionality?
In Bootstrap 4, you can use .is-invalid and .is-valid classes on .form-control to manually indicate the form fields validity
https://getbootstrap.com/docs/4.3/components/forms/#server-side
Codepen demo
I can't seem to get this to work for the life of me. I've tried setting the value to '' with getElementById('guess').value and $('#guess').val, tried using $('#formGuess').reset(), etc. Don't know why the value won't clear out.
Here is my code on this:
js
$('#submit').on('click', function(e) {
e.preventDefault();
var guess = $('#guess').val();
$('#guess').removeAttr('value');
}
HTML
<div class="container center">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="post" id="guessForm">
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder="Guess" id="guess"/>
</div>
<input type="submit" class="btn btn-success" name="submit" value="Guess" id="submit"/>
</div>
</form>
</div>
</div>
Set empty string as the value of textbox like following.
$('#guess').val('');
First, you should attach a "submit" listener to the form, not to the button, e.g.
<form id="someForm"></form>
$("#someForm").submit(function () {
// your code
});
But if you want to attach it to the button, then you can do that, no worries.
Make sure that the event is called. Are you sure that the function within "click" event is called? Put there a console.log("someText");
If it's called, then make sure that jQuery is getting the right element. Maybe you've made a typo? Maybe there's a missing "#" sign? Or maybe the jQuery is not loaded at all?
Open developers tools and check what's in the console.
Probably you've made a simple mistake - it's always about simple mistakes. : )
From your code,
var guess = $('#guess').val();
you are getting the value not setting.
To set the value
$('#guess').val('');
I have searched for a solution all over, so here is my first question to this site:
I am trying to have some nice validation in angular (ionic) page where the logic is I want to show a "Required" message under label when either there is a validation error ($error.required) OR the field has not been touched and is empty (like a first time load). I can use pristine to check if it is not been modified, but if the form loads values from the model subsequently (like when restoring from localstorage), it still shows the "required" validation message.
I have tried the following:
<form name="wdform" novalidate>
<label class="item item-input item-stacked-label">
<span class="input-label green-small">ID</span>
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && wdform.userid.length < 1)" >
Required
</div>
<input name="userid" ng-model="input.UserID" type="text" required>
</label>
... rest of form...
</form>
Also have tried:
<div class="validation" ng-show="wdform.userid.$error.required ||
(wdform.userid.$pristine && input.UserID.length < 1)" >
and various other permutations such as:
(wdform.userid.$pristine && input.UserID == '')
(wdform.userid.$pristine && wdform.userid.$invalid)
etc. ad nauseum.
On a separate but related note, I have also found that the built in validation is pretty brittle when it comes to form and field names... it only seems to work at all if the form name is only lowercase and/or contains no special characters ("DumbForm" and "dumb-form" fails, but "smartform" works).
Anyway, does anyone have any thoughts?
I feel like your two scenarios, (1) $error.required and (2) pristine and empty, might be redundant. Anytime #2 would be true, so would #1. I think you could use just #1.
Look at this example:
http://plnkr.co/edit/PgQ3vEIOKkfA38dDWjhp?p=preview
<body ng-controller="myController as vm">
<h1>Hello Plunker!</h1>
<form name="wdform">
<input type="text" name="userid" ng-model="userId" required/>
<div ng-show="wdform.userid.$error.required">Required</div>
</form>
</body>
However, it sounds like you are populating your form on page load some times from localStorage and somehow this is not causing the $error.required property to be changed to true, but it should. So your real problem I think lies in need to call $scope.$apply() or something to tell angular to run validations again.
I found that the issue was related to where the validation div was placed.
If the validation div was placed before the input field (so that it displayed the validation message beneath the field label), I encountered the error specified in this question.
By placing it after the input tag, it works as expected (with the validation message beneath the input field).
I would consider this a bug either in Angular or Ionic. Hopefully it will be corrected in the upcoming version 2 of both.
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="f3.form.reset()">
Just add the click in the button.so form loads values from the model in reset().Once click the button form will reset. You get new form with no errors.
I have a form with some inputs text.
All keys works fine in text inputs except the spacebar key.
When I alert the keyCode it alert 32 but nothing append in the field.
I'm using JQuery 1.10.2, JQeryUI 1.9.2 and twitter bootstrap.
As a side note, the whole form is rendered in ajax with xajax library (http://www.xajax-project.org/)
Nothing fancy about the HTML :
<div class="span6">
<div id="dJob_Title" class="control-group">
<label class="control-label">Job title</label>
<div class="controls">
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</div>
</div>
</div>
Thanks in advance for your help.
(sorry for my very bad English).
Problem I think is you havent closed your input tag or check if all html tags are well formatted
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</input>
Ok, i finaly found out the mistake.
It's a js for image slider (fadeSlideShow.js)
As it's instantiate in index.php (and 90% of the site is rendered via ajax in a div in index.php) even if i don't see it, it still capturing the space event (wich is autoplay)
i just commented this in the js :
else if(e.which==32){
if(intval){stopAutoplay();}
else{autoplay();}
return false;
}
and all is fine !
Thank you all for your response/reactivity and the waste of your time for something i have should seen before.