I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};
Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />
Related
I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>
The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)
The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well
hi every one I am working on angular js project. But here is a little problem i am using dynamic form for multiple fields and using select2 function for search but first time it is working then after making new field it is not working for search can you please help me??
here is my controller code for making dynamic field
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
};
here is code of view
<div data-ng-repeat="choice in choices">
<div class="row">
<div class="col-md-3">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> خریدار کھاتہ</label>
<select ng-model="choice.purchaser_account" name="account{{choice.id}}" class="form-control select2" required>
<option ng-repeat="x in purchaserAccount" value="{{x.id}}">{{x.name}}</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable" > وزن</label>
<input type="text" id="weight" ng-model="choice.weight" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ریٹ</label>
<input type="text" id="price" ng-model="choice.price" class="form-control" required="required">
</div>
</div>
<div class="col-md-2">
<div class="form-group label-floating">
<label class="control-label urdu-lable"> ٹوٹل</label>
<div>{{((choice.price*(choice.weight/40))+((choice.price*(choice.weight/40))*.016)).toFixed(2)}}
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group label-floating">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>
</div>
</div>
</div>
<button class="btn btn-info" ng-click="addNewChoice()">Add fields</button>
can you please help me to solve out this problem
Initialize select on your angular add function.
$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
$(".select2").select2();
};
same initialize it where your are add first option in choice array.
i'm trying to validate my bootstrap form with regex in javascript. I've started the javascript but don't know the right way to continue the validation with my regular expression. I'm trying to validate every input in my form before submitting it.
If anyone could help me with my issue it would be appreciated.
Thank you very much in advance.
In javascript no Jquery please
John Simmons
HTML (This is my html bootstrap form)
<div class="col-md-6">
<div class="well well-sm">
<form class="form-horizontal" id="form" method="post" onsubmit="return validerForm(this)">
<fieldset>
<legend class="text-center header">Contact</legend>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="lastName" name="LN" type="text" placeholder="Nom" autofocus class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="firstName" name="FN" type="text" placeholder="Prenom" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="email" name="email" type="text" placeholder="Courriel" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="phone" name="phone" type="text" placeholder="Téléphone" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<textarea class="form-control" id="message" name="Message" placeholder="Entrez votre message. Nous allons vous répondre le plus tôt que possible." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<input class="btn btn-primary btn-lg" type="reset" onclick="clearForm()" value="Clear">
</div>
</div>
</fieldset>
</form>
</div>
</div>
Javascript (this is my javascript with my regexs, I was thinking about doing a function that would verify every value entered with the regex)
var nameregex = /(^[A-Z][a-z]{1,24})+$/;
var emailregex= /^([A-Za-z])([A-Za-z0-9])+\#([a-z0-9\-]{2,})\.([a-z]{2,4})$/;
function validerForm(form) {
window.onload = function(){
document.getElementById('lastName').focus();
}
var valName = Formulaire.name.value;
var valFirst = Formulaire.firstname.value;
var valEmail = Formulaire.email.value;
var nameValide = validationName(valName);
var firstValide = validationFirstName(valFirst);
var emailValide - validationEmail(valEmail);
}
function validationName(valName){
if(nameregex.test(valName) == true){
}else{
}
}
function clearForm() {
document.getElementById("form").reset();
}
You may use string.match()
i.e.: if (valEmail.match(emailregex)) { do stuff!; }
i have a case here. when clicked on button i want the class to be change for example if the button is clicked i want hide-tab to be removed and at the same time i want to add show-tab class this is my jquery code please help me with it
$(document).ready(function() {
$('#button').on('click', function() {
$('.form-group').removeClass('hide-tab');
$(this).addClass('show-tab');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<form class="fs-form fs-form-full">
<div class="form-group">
<label class="field">What is your name?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your mobile number?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your email address?</label>
<input type="email" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What type of event do you want us to organize?</label>
<select class="form-control">
<option>Dance Events</option>
<option>Birthday Events</option>
<option>Family Gathering Events</option>
<option>Marathon Events</option>
<option>Awards Ceremony</option>
<option>Art Competition</option>
</select>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Breif your thoughts</label>
<textarea class="form-control"></textarea>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Schdule Meeting</label>
<input type="date" class="form-control">
<div class="border"></div>
</div>
<div class="form_group">
<button type="submit" class="btn btn-primary" id="button">Continue</button>
</div>
</form>
</div>
Since your button type is submit.So changes happen but at-once form is processed and everything is reloaded. That's why you are unable to see the changes.
Use preventDefault() like below:-
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
$('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class
$(this).addClass('show-tab'); // this will add class to the button only not to others
});
});
I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do