I'm working on an e-commerce project that uses jquery repeater in the wizard. I need to loop through the elements of the input to make my validations. Here is my input form code.
<button data-repeater-create type="button" class="btn btn-dark btn-sm icon-btn ml-2 mb-2 float-right">
<i class="mdi mdi-plus"></i>
</button>
<div data-repeater-list="group">
<div data-repeater-item class="d-md-flex mb-2">
<div class="form-group mr-1">
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="sku" placeholder="sku">
</div>
</div>
</div>
It comes in the browers elements like this,
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="group[0][sku]" placeholder="sku">
you can see, its like an array. So I need to get all these elements and validated all. For other field validation I have use
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
can I use this for the those field?
Thanks in advance.
Related
Problem: Can't get code to 'click' button to execute action
Context: I'm able to get the element and change it from disabled to visible so I know I have the button class name correct in the command prior to this one but for whatever reason when the code gets to this switch case nothing happens; and no error is provided in the xcode console. There is no button input id and no form name associated either.
Question: Since I'm certain I have the getElementsByClassName....click() part correct, and I know this is the only element on the page with this name is there another way to execute the 'click'
Website HTML code:. [Last few lines of code]
<div class="mr-0 mr-md-5 pr-md-4 mb-4">
<p class="mb-1 body-s" role="" aria-live="">Password</p>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="oldPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control is-invalid" type="password" id="oldPassword" placeholder="Old password" maxlength="40" aria-describedby="error-oldPassword" aria-label="oldPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show Current Password">Show</button>
<div aria-live="polite">
<div class="error-class" id="error-oldPassword">Please enter your password</div>.
</div>
</div>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="newPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control " type="password" id="newPassword" placeholder="New password" maxlength="40" aria-describedby="error-newPassword" aria-label="newPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show New Password">Show</button>.
<div aria-live="polite"></div>
<span>
<ul class="ul-list-helpText">
<li class="">Password must be 8-40 characters long.</li>
<li class="">Your new password cannot be the same as your old password.</li>
</ul>
</span>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-link body-s h-auto my-2 mr-3">Cancel</button>.
<button type="button" class="btn btn-secondary core-btn uca-button btn btn-sm btn-primary">Save</button>
</div>
</div>
Swift Code [Doesn't work to click Save button]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].click();"){
(result, error) -> Void in
print(error)
}
Swift Code [Works to enable Save button - when it's originally disabled]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].disabled = false;"){
(result, error) -> Void in
print(result)
print(error)
}
I have these form inputs that I generate with *ngFor after clicking a button.
in these inputs, I put the required attribute but it seems like it doesn't affect the form.invalid
I got other required inputs that aren't generated dynamically and when they're not filled with values the submit button is disabled as I want it to be, so I guess the issue is that the dynamic inputs doesn't exist until I click the button.
In addition I didn't manage to bind these inputs since they're dynamic, and I want to get they're values and send to a service when submitting the form.
any suggestions how to do such a thing?
EDIT
I've added to my model object in component.ts this this.model.players = Array(this.model.numOfTeams*this.model.numOfPlayers).fill(new Result())
and to my html i added ngModel 2way binding. now the validation is working fine, but all of the fields with same name (for example firstName) are changed together when I type in one of them.
here is my component.html:
<div class="container">
<form #newSearch="ngForm" class="form" ngNativeValidate>
<div class="form-group pl-3">
<fieldset name="generatePlayerCards">
<legend>generatePlayerCards</legend>
<p>Please choose <b>number of teams</b> and <b>number of players for each team</b>:</p>
<input class="form-control mt-3" type="number" name="numOfTeams" id="numOfTeams" min="1" max="5" placeholder="Number of teams" [(ngModel)]="model.numOfTeams" required>
<input class="form-control mt-3" type="number" name="numOfPlayers" id="numOfPlayers" min="1" max="20" placeholder="Number of players for each team" [(ngModel)]="model.numOfPlayers" required>
<button class="btn btn-primary mt-3" type="button" (click)="generatePlayerCards()">Done</button>
</fieldset>
</div>
<div class="card-group">
<div *ngFor="let j of ngArr; let i = index; trackBy:trackByIndex;" class="col-4 mt-3">
<div class="card">
<div class="card-header text-left"><h5>New Player Data</h5></div>
<div class="card-body">
<label for="firstName{{i}}"></label>
<input type="text" name="firstName{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="First Name" required [(ngModel)]="model.players[i].firstName">
<label for="lastName{{i}}"></label>
<input type="text" name="lastName{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="Last Name" required [(ngModel)]="model.players[i].lastName">
<label for="score{{i}}"></label>
<input type="text" name="score{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="Score" required [(ngModel)]="model.players[i].score">
</div>
</div>
</div>
</div>
<div class="col-3 mt-4">
<button [disabled]="newSearch.form.invalid" class="btn btn-primary mr-2" type="submit" (click)="search()">Submit</button>
<button class="btn btn-secondary" type="reset" (click)="resetForm()">Clear Form</button>
</div>
</form>
</div>
In Angular in order to have dynamic fields and validation it is best practice to do it using a Form Array.
It might seem complicated at first, but Reactive forms in Angular are an incredible tool that will let you achieve great results with little to no effort in future.
There are plenty video tutorials, this one is the best imho.
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I am trying to get my dynamic form additions/subtractions to work correctly. The situation is that I am able to get the form block to add or remove, however, when I click the remove button it removes the most recently added block rather than the one I click on.
For example, if I add two new form blocks for a total of 3 blocks (block1, block2, block3) and I click remove on block2, instead of removing block 2 it removes block3.
I have created a plunker that demonstrates this, but it ONLY works when you launch the preview side in a separate window (otherwise the add button is inactive for some reason).
Working Example (must open in popup preview in plunker to function): plunker
<form class="form-horizontal" name="cpdForm" novalidate="" ng-submit="processForm()" ng-show="!message">
<h2>Subcontractor Performance</h2>
<hr />
<div ng-repeat="subcontractor in subcontractors">
<div class="well well-sm">Subcontractor #{{subcontractor.id}} <span id="subCounter"></span>
<button type="button" ng-click="removeSub()" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="subName">Subcontractor Name</label>
<input type="text" class="form-control" id="subName" name="subName" placeholder="Subcontractor" ng-model="formData.subName['subName'+($index+1)]" />
</div>
<div class="col-md-3">
<label for="mwbeCert">Disadvantaged Certification</label>
<select class="form-control" name="mwbeCert" ng-model="formData.mwbeCert" required="">
<option value="">Select MWBE Certification...</option>
<option ng-repeat="item in dropdownpoll['mwbecert']" value="{{item.mwbeid}}">{{item.mwbe}}</option>
</select>
</div>
<div class="col-md-3">
<label for="subAmount">Contracted Amount</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-usd"></i>
<input type="text" class="form-control" id="subAmount" name="subAmount" placeholder="Contracted Amount" ng-model="formData.subAmount" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="subContactName">Contact Name</label>
<input type="text" class="form-control" id="subContactName" name="subContactName" placeholder="Contact Name" ng-model="formData.subContactName" />
</div>
<div class="col-md-4">
<label for="subContactPhone">Contact Phone</label>
<input type="text" class="form-control" id="subContactPhone" name="subContactPhone" placeholder="Contact Phone" ng-model="formData.subContactPhone" />
</div>
<div class="col-md-4">
<label for="subContactEmail">Contact Email</label>
<input type="text" class="form-control" id="subContactEmail" name="subContactEmail" placeholder="Contact Email" ng-model="formData.subContactEmail" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="subRating">Subcontractor Rating</label>
<select class="form-control" name="subRating" ng-model="formData.subRating" required="">
<option value="">Select Subcontractor Rating...</option>
<option ng-repeat="item in dropdownpoll['subrating']" value="{{item.subratingid}}">{{item.rating}}</option>
</select>
</div>
<div class="col-md-9">
<label for="subComment">Comments</label>
<input type="text" class="form-control" id="subComment" name="subComment" placeholder="Comments" ng-model="formData.subComment" />
</div>
</div>
<hr />
<button type="button" class="btn btn-info btn-sm pull-right" ng-show="showAddSub(subcontractor)" ng-click="addNewSub()">[+] Add New Sub</button>
</div>
<input type="hidden" style="display:none;" ng-model="formData.subCount" value="{{subcontractor.id}}" />
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-primary" id="submit" ng-click="submitting()" ng-disabled="buttonDisabled">{{submit}}</button>
</div>
</div>
</form>
<pre>{{formData}}</pre>
you are splicing $scope.subcontractors-1 which only behaves like it does, ie, removes the last one.
try using $event.currentTarget as a general rule, it will indicate the clicked item exactly, and don't forget to pass $event as a parameter for the remove function.
I hope this helps you
You need to pass an index to the function removeSub
I modified your fn to accept an index
$scope.removeSub = function(ind) {
var newItemNo = $scope.subcontractors.length-1;
$scope.subcontractors.splice(ind-1, 1);
};
and in your HTML you just pass the currently iterated $index
<button type="button" ng-click="removeSub($index)" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Hope this works. But be careful your formdata and subcontrators array are not in sync after this, thats a programming logic I guess you have to fix.
Happy coding
Cheers.
Joy
Not a full answer but your not telling the function in your script.js which one to remove your just telling it to chop one off the end. Try setting it up so that you pass the current subContractor id like ng-click="removeSub({{subcontractor.subContractorId}})" (not sure what your data model is) you could also reference the index but I believe that would be harder.