We Keep Coding

Restrict typing decimal point in vue js [duplicate]

This question already has answers here:
Number input type that takes only integers?
(25 answers)
Closed 2 years ago.
I am trying to restrict the user to type decimal point as below.
<b-form-input
size="sm"
type="number"
v-model.number="lots"
class="inputprice"
style="width:40%"
oninput="javascript: if (this.value === '.') return;"
>{{ lots }}
</b-form-input>
But this attempt not working. Anyone knows how can I do it inside on input attribute?

You can use parseInt to convert the input value to an integer as follows:
new Vue({
el:"#app",
data(){
return{
lots:0
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
type="number"
v-model.number="lots"
class="inputprice"
style="width:40%"
oninput="this.value = parseInt(this.value);"
/>{{ lots }}
</div>

Write text to a input field? [duplicate]

This question already has an answer here:
AngularJS update input manually does not trigger change in the model
(1 answer)
Closed 3 years ago.
Here is the following code;
<div class="col-xs-12 col-sm-9">
<input id="Shipping_FirstName" name="firstname" ng-model="userOrder.Shipping.FirstName" type="text" class="form-control nsg-form--input ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-maxlength" ng-class="{'is-invalid': shipping_subform.$submitted && shipping_subform.firstname.$invalid}" required="" maxlength="35" tooltip="Please enter your first name" tooltip-toggle="shipping_subform.$submitted===true && shipping_subform.firstname.$invalid===true" esw-google-analytics-blur=""> <!-- ngIf: shipping_subform.$submitted && shipping_subform.firstname.$invalid -->
</div>
I have tried the following which writes the text to the input field;
document.getElementById("Shipping_FirstName").value = "test"
document.querySelector("input[id='Shipping_FirstName']").value = "test";
However, when I press the submit button, it says "Please enter your first name" as if the code above actually didn't write the text.
How can I fix this?
Thanks for any help, it's all appreciated.

Thanks to epascarello, the answer is;
var e = document.getElementById("Shipping_FirstName");
e.value = "test";
var $e = angular.element(e);
$e.triggerHandler('input');

how to show red border in input field on button In angular js

Could you please tell how to show red border in the input field on a button in angularJs . Currently, the red border is displayed when the application load. Actually, I added ng-required validation on my form .but I want this only work after button click here is my code
http://plnkr.co/edit/zL0cueTJN6xqxC4LzhOd?p=preview
<div class="form-group" ng-class="{'has-error': myform[key].$invalid}">
<input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required">
</div>

Declare a variable $scope.isSubmitClicked=false; in scope and make it true in submit()
$scope.isSubmitClicked = false;
$scope.submit = function ($event) {
$scope.isSubmitClicked = true;
};
Then
<input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked">

AngularJS - form validation, v 1.4.8

This is my first time using AngularJS, and the form validation is making me question my sanity. You would think this would be the easy part, but no matter how many ways I've tried Googling, the only thing that works is if I set a flag inside my controller's submit if the form is invalid to set the error class. I've looked at similar problems here, but none of them helped, so please do not simply dismiss this as a potential duplicate. Everything else has been a fail.
In the example mark up below I have reduced my form down to just one element. Here is what I have observed:
Using only $error.required does work. The ng-class { 'has-error' :registerForm.firstName.$error.required} does outline the text box with the bootstrap has-ertror class, but this is on form load, which I do not want.
The <p> element with the error message will exhibit the same behavior, so I know that the message exists and is not malfored. It will also display if I only use $error.required. But as soon as I add && registerForm.$submitted ( or $isdirty or !notpristine ) the message will not display on form submit. There are no errors (have developers tools open in chrome) and will post to the web API with no problem and return ok 200 or 400 if I send bad params.
I can write validation code inside my controller, checking if the field has a value and setting a flag on $scope such as $scope.firstNameIsRequired and that will work fine setting ng-show="$scope.firstNameIsRequired", but that will remove testability.
So the problem definitely has to be with how I am adding this in the markup. But after a weekend spent googling I am at my wits end. The only other thing different is that I am using a span on a click element to submit the form instead of an input = submit, but the registerForm.$valid function is setting the correct value. Do I somehow need to trigger the form validation in that ng-click directive?
I am using angular.js v 1.4.8.
I do have angular ui which has it's own validate, but that shouldn't interfere with the basic validation.
Here is the simplified markup:
<form name="registerForm" class="form-group form-group-sm"
ng-controller="userAccountController" novalidate>
<div class="form-group"
ng-class="{ 'has-error' : registerForm.firstName.$error.required }">
<div><label>First Name</label> </div>
<input type="text" class="form-control" id="firstName" name="firstName" value=""
ng-model="firstName" placeholder="First Name" maxlength="100" required=""/>
<p ng-show="registerForm.firstName.$error.required && registerForm.$submitted"
class="alert alert-danger">First Name is required</p>
</div>
<div>
<span class="btn btn-default"
ng-click="submit(registerForm.$valid)">Register</span>
</div>
My controller code is
angular.module( "Application" ).controller( "userAccountController", [
"$scope", "userAccountService", function ( $scope, userAccountService)
{
$scope.hasErrors = false;
$scope.errorMessages = "";
$scope.emailExists = true;
$scope.clearErrors = function (){
$scope.hasErrors = false;
}
$scope.onSuccess = function ( response ) {
alert( "succeeded" );
}
$scope.submit = function (isValid) {
if ($scope.registerForm.$invalid)
return;
alert("isvalid");
$scope.clearErrors();
var userProfile = $scope.createUser();
userAccountService.registerUser(userProfile, $scope.onSuccess, $scope.onError);
}
$scope.createUser = function () {
return {
FirstName: $scope.firstName, LastName: $scope.lastName, Email: $scope.email,
Password: $scope.password, SendAlerts: $scope.sendAlerts
};
};
}
]);
Any help will be appreciated. I probably just need a second set of eyes here because I have been dealing with this on and off since late Friday.

in angular you want use the element.$valid to check wheter an model is valid or not - and you use element.$error.{type} to check for a specific validation error.
Keep in mind that the form.$submitted will only be set if the form is actually submitted - and if it has validationerrors it will not be submitted (and thus that flag is still false)
If you want to show errors only on submit you could use a button with type="submit" and bind to ng-click event - and use that to set a flag that the form has been validated. And handling the submit if the form is valid.
A short example with 2 textboxes, having required and minlength validation:
angular.module("myApp", [])
.controller("myFormController", function($scope) {
$scope.isValidated = false;
$scope.submit = function(myForm) {
$scope.isValidated = true;
if(myForm.$valid) {
console.log("SUCCESS!!");
}
};
});
.form-group {
margin: 10px;
padding: 10px;
}
.form-group.has-error {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" ng-controller="myFormController">
<form name="myForm">
<div class="form-group" ng-class="{'has-error': myForm.name.$invalid && isValidated}">
<span>Name:</span>
<input type="text" name="name" minlength="5" ng-model="name" required />
<span ng-if="myForm.name.$error.required && isValidated">Name is required</span>
<span ng-if="myForm.name.$error.minlength && isValidated">Length must be atleast 5 characters</span>
</div>
<div class="form-group" ng-class="{'has-error': myForm.email.$invalid && isValidated}">
<span>Email:</span>
<input type="text" name="email" minlength="5" ng-model="email" required />
<span ng-if="myForm.email.$error.required && isValidated">Email is required</span>
<span ng-if="myForm.email.$error.minlength && isValidated">Length must be atleast 5 characters</span>
</div>
<button type="submit" ng-click="submit(myForm)">Submit</button>
</form>
</div>

how to check if form is submitted without submit button? [duplicate]

This question already has answers here:
Checking if form has been submitted - PHP
(9 answers)
Closed 8 years ago.
I want to submit a form with js function, and in the php action page I want to check if the form is submitted or not, here is my code:
<form method="post" action="index.php" name="form1">
<fieldset>
...
</p><div class="clearfix"></div>
<input type="button" id="send1" onclick="validateForm1();" class="comment_submit" value="SUBMIT" name="send1"><p></p>
</fieldset>
</form>
and this is the js:
function validateForm1(){
var name = document.getElementById('fullName');
...
if(isNotEmpty(name))
...
document.forms['form1'].submit();
}
so how I can check if the form is submitted or not, without using if(!empty($_POST)) because I have 2 forms will be submitted to the same action page.

Check whether your fields are filled.
if(!empty($_POST["field1_from_form1"]) && !empty($_POST["field2_from_form1"]) /* && ... */) {
// Form 1 is filled.
}
And for the other form...
if(!empty($_POST["field1_from_form2"]) && !empty($_POST["field2_from_form2"]) /* && ... */) {}
You can also set a hidden input into each form...
<input type="hidden" name="formID" value="1" /> <!-- Form 1 -->
<input type="hidden" name="formID" value="2" /> <!-- Form 2 -->
... and check it:
if(isset($_POST["formID"]) && $_POST["formID"] == 1) // ...
if(isset($_POST["formID"]) && $_POST["formID"] == 2) // ...
For your next questions on Stack Overflow, please use the site's search feature to avoid duplicating already-answered questions.

if($_SERVER['REQUEST_METHOD'] === 'POST') {
if($_POST['myHiddenInput'] === 'form1'){
//process form 1
}
else if($_POST['myHiddenInput'] === 'form2'){
//process form2
}
}
And add some hidden input into form to recognition which one form you posted.