I am creating a form, the customer has requested an 'eventStart' and 'eventStop' range, they also want it to be required, and don't want anyone to be able to manually change the values.
I am using jquery datePicker and jquery validate.
I have it working one way or the other, but not both.
<input class="inputs" type="text" id="eventStart" readonly/>
<input class="inputs" type="text" id="eventStop" readonly/>
This works perfectly, the range works, and it cannot be manually edited.
<input class="inputs" type="text" id="eventStart" required/>
<input class="inputs" type="text" id="eventStop" required/>
This pops up the "! Please fill out this field", but allows the date to be manually edited.
If I put both, it allows the user to skip the field (no validation.)
In this case if you add readonly and required and it bypasses validation your options are to implement your own validation or to hook form submit or the onclick action of your submit button.
Another option is to use required only. Then hook the keydown action and stop text entry.
$("#inputs").keydown(function (event) {
event.preventDefault();
});
This will only stop text entry and is not secure. Sneaky people can still change the value if they want. Don't forget to validate field entry on the backend.
i have this workaround
$nextmonth = date('Y-m-d 23:59:59',strtotime("+1 month"));
and for input
<input type="text" class="text-input" name="project_deadline" id="project_deadline" value="<?php echo $nextmonth ?>" readonly />
Related
I have a form, and the form has multiple inputs that are all bound to different variables. Before submitting the form, I need to do validity checks, pristine checks, etc. For example, I want my submit button to be disabled if every part of the form is pristine, or if something is invalid.
Using Angular 5, I am trying to get access to the .pristine, .valid, and .invalid flags for each input field, but the values are either undefined or "cannot get .pristine of undefined".
I am able to get these flags on the entire form itself, but this doesn't help, because I want to know how to get it for each individual input.
Here is my current code (I've removed a number of my inputs to simplify the example).
<form #editDetailsForm="ngForm" name="editDetailsForm" >
<label for="name"> Name </label>
<input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />
<label for="description"> Description </label>
<textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>
<button id="submit" type="button"
[disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
(click)="updateDetails()" >
Save
</button>
</form>
If you see, I bind disabled attribute on the Save button to saveButtonDisabled() function, where I want to pass in information about each input's validity. The first argument, editDetailsForm.invalid returns a true or false, but the other values return undefined.
How do I check validity of these individual inputs?
EDIT: I realize I can derive all of this info inside my component because all of the input values are bound. However, it'd be easier just to check a flag or two.
I'm not sure I totally understand what you want to do, but this is how you get access to the form controls .pristine, .invlaid
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
The #name="ngModel" sets a template reference to the FormControl angular creates
Then you should be able to do something like this:
<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
Name is Pristine
</div>
Just to clarify, the individual form fields bubble up to the form itself. So if any field has been touched, then the whole form will be pristine == false.
You can access the input controls using the .controls property, like:
<button id="submit" type="button"
[disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">
Created a stackblitz. https://stackblitz.com/edit/angular-5ir4k7
Added template reference variable for ngModel and validate using isValid.
Is quite simple but very strange.
I'm using Codeigniter, i've an App where an User can create other users and then change their passwords.
For this reason i've a simple form as the following:
<form action="<?php echo site_url("Manage/changeUserPassword"); ?>" method="post">
<input hidden class="inputwithiduser" type="text" name="iduser" value="">
<input type="password" id="inputPasswd" name="password" placeholder="New password" value="">
<button type="submit">Save</button>
</form>
I fill the first input (with class inputwithiduser) with JQuery.
Inspectioning, these inputs have the correct values. BUT.... AFTER SUBMIT my controller retrieve as $this->input->post("iduser"); the value that Chrome has saved as Username for my personal login. In other words, CHROME is changing my input (despite inspecting the iduser input with Chrome tool it's all okay) after submit!
Have you any ideas? I tried with autocomplete="off", autocomplete="false", etc without success.
Thank, Luca
Have you tried autocomplete="foo" (or whatever value)? New browsers use this attribute different as they used it before
I have the same issue, and finally i solved by this:
<input type="text" name="username" hidden/>
<input type="password" name="password" hidden/>
add two input before your oiriginal input.
I have a text field as
<input type="text" class="form-control" id="inputID" name="inputName" ng-model="inputUserName" ng-required="true" autofocus="true"/>
Once I input the text value and say, press Tab, or move on to the next field, I want to call a function which basically takes the input value and sends it to my server API to perform a validity check. How can I achieve this?
use the ng-blur:
<input type="text" ng-blur="method()">
https://docs.angularjs.org/api/ng/directive/ngBlur
I am creating a sign up form in PHP. Every time I click on sign up button the browser asks to save the email and password. How can I stop this?
As of April 2016, this is browser-level behaviour and the user's reponsibility to control.
Two things you can do are:
You can inform the user on how to prevent this message displaying and
File a complaint with the browser devleopment team to urge them to change the behaviour. If enough people want it changed then it will be changed.
You can use autocomplete="off" on input fields like this
<input type="text" name="Username" autocomplete="off">
<input type="password" name="Password" autocomplete="off">
or on the form tag. May not work on all browsers.
Please refer to http://caniuse.com/#search=autocomplete on supported browsers.
This code solves my issue. I have just add
readonly onfocus="this.removeAttribute('readonly');"
besides
autocomplete="off"
And input should look like this
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Add attribute autocomplete="off" in form tag
-----
How do you disable the autocomplete functionality in the major browsers for a specific input (or form field)?
<input type="text" id="fullname" name="fullname" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
When I open this form I see the value in this input even if I didn't insert any value.
I think adding autocomplete="off" would get you an error on most browsers, furthermore, autocomplete="off" is an invalid property.
Try to check the Mozilla Developer Documentation instead.
Just use the autocomplete attribute:
<input type="text" autocomplete="off"/>
"This would be useful when a text input is one-off and unique. Like a
CAPTCHA input, one-time use codes, or for when you have built your own
auto-suggest/auto-complete feature and need to turn off the browser
default."
Source : CSS Tricks
You could generate a random string using javasript or php and add it to the end of an input name, maybe even use a delimiter to split it apart from the actual name.
In php, you could use something like the session_id for this and simply echo it to the end of the name.
<input type="text" autocomplete="off" name="example<?php echo "," . session_id()?>">
You can replace the "," with any delimiter of your choice, so long as it isn't alphanumeric. Then when processing the data submitted, you can remove it from the end of the actual name of the input field.
With a field name always being different, your browser cant autocomplete it.
Source: https://stackoverflow.com/a/218453/12251360
Solution 1
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.
Solution 2
The solution for Chrome is to add autocomplete="new-password" to the input type password.
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".
This works well for me.
Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.
Solution 3
<input type="text" id="fullname" name="fullname" autocomplete="off" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
links
Solution 3 Reference : https://stackoverflow.com/a/25496311/6923146
Solution 2 Reference : https://stackoverflow.com/a/40791726/6923146