I am creating dynamic textboxes from a list like the following
Angular js
$scope.phonenumbers = [{text: ''},{text: ''},{text: ''}];
HTML Part
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" >
</div>
Now I need to do the following validation in form
Any one of the following 3 textboxes is mandatory. I put required but it is validating all.
Please help
You will need to use ng-required and conditionally set the required to true for all the field only when none of the fields have a value. To do this you will need to maintain a flag in your controller and bind that your ng-required.
The method in the controller:
$scope.isValue = false;
$scope.textChange = function(){
$scope.isNoValue = $scope.phonenumbers.some(function(item)){
return item.text;
}
}
Your HTML:
<div class="relativeWrap" ng-repeat="phone in phonenumbers">
<input placeholder="Phone Number" pattern="[0-9]{10}" ng-maxlength="10" maxlength="10" type="text" class="form-control input-text phone_number" name="phonenumber[]" ng-model="phone.text" ng-required="!isValue" ng-change="textChange">
</div>
Related
I want to automatically fill the registration form fields on an HTML web page. The form has multiple input boxes. I want to define the value of fields and when the web page appears the fields fill automatically. Before, I used autofill extension for it. But, the autocomplete feature of fields has been off and HTML objects don't have names or ids. Also, they have the same class. Therefore, fields don't fill automatically. How I can fill fields on the webpage automatically?
for example, two input objects and some of codes have been defined as follow:
<input autocomplete="off" class="red" placeholder="" type="text">
<input autocomplete="off" class="red" placeholder="" type="text">
<div class="input-item" max-length="10" placeholder="ID" data-v-6b0449e1=""><label class="label"><i>*</i>ID:</label><input autocomplete="off" class="ltr green" max-length="10" placeholder="" type="text"><p class="errors"><ul></ul></p></div>
<div class="select-item" data-v-6b0449e1=""><label class="label"><i>*</i>Sex:</label><select><option hidden="" disabled="" value="">Select</option><option value="false">male</option><option value="true">female</option></select><p class="errors"><ul></ul></p></div>
If you're looking to fill the fields when the page loads, you can use JavaScript:
HTML
<form class="my-form">
<input type="text" id="input1" />
<input type="text" id="input2" />
<input type="text" id="input3" />
</form>
JavaScript
window.onload = function() {
document.getElementById("input1").value = "This is the first input";
document.getElementById("input2").value = "This is the second input";
document.getElementById("input3").value = "This is the third input";
}
All this does is just, when the page loads (window.onload), replaces the value of each of the specified input fields to whatever you set it to.
I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
I am quite new to this HTML Input Control.
So I want to add "required" attribute to intlTelInput control. Adding the attribute in conventional way i.e
<input type="tel" name="mobile" id="mobile-number" required="required">
is not working.
Can anyone guide me through the process of adding validation to this control.
I have included following css:
<link rel="stylesheet" href="plugins/intl-tel/css/intltelinput.min.css">
Then added the control:
<label>Enter your mobile number</label>
<input type="tel" name="mobile" id="mobile-number" required="required">
And then at end of file I included the script file:
<script src="assets/plugins/intl-tel/js/intltelinput.min.js"></script>
To add default country I have added following js:
(function($){
$(document).ready(function() {
if (typeof $.fn.intlTelInput !== 'undefined') {
$("#mobile-number").intlTelInput({
defaultCountry: "in",
preferredCountries: ["in"]
});
}
});
})(window.jQuery);
Thanks
Try to use the following code:
change type to text
add only a required attribute
Notes: You could use the pattern attribute for phone number in case you need it.
<form action="/action_page.php">
<input type="text" name="mobile" id="mobile-number" required>
<input type="submit">
</form>
Consider the following code:
<input type="text" oninvalid="alert('Missing required fields!');" id="input1" name="input1" required/>
<input type="text" oninvalid="alert('Missing required fields!');" id="input2" name="input2" required/>
<input type="text" oninvalid="alert('Missing required fields!');" id="input3" name="input3" required/>
I wish that regardless of how many of the three fields the user leaves blank, the alert message only appears once. With my current code, the alert message is displayed as many times as there are invalid fields.
You could use a JavaScript function that is called by oninvalid. It works by using an if statement that is only true the first time the function is called, after that alert() will no longer be called.
var once = false;
function prompt(){
if(once == false){
alert('Missing required fields!');
once = true;
}
}
Then use oninvalid="prompt();" in your input tag.
I have working on Edit Profile page in angular Js
Normally List of details will be show. When click on one list , I called the one method
$scope.editContact = function(user){
$('#editContactSection').show();
$scope.eUser = user;
}
Then I assigned the text box value by eUser
<input type="text" class="form-control" id="fname" ng-model="fname" name="fname" ng-minlength='3' value="{{eUser.firstname}}" required>
<div ng-show='editContacForm.fname.$error.minlength' class='error'>Enter atleast 3 characters</div>
Here i got the textbox value in input tag in console like value="somename".
Value is assigned correctly. But i can't see in textbox in browser window
And how to change the drop down list value. That drop down list value filled by angular js ng-repeat
Try setting ng-model='eUser.firstname'
as in
<input type="text" class="form-control" id="fname" ng-model="eUser.firstname" name="fname" ng-minlength='3' required>
Try this
$scope.editContact = function(user){
$('#editContactSection').show();
$scope.eUser = user;
$scope.fname = $scope.eUser.firstname;
}
Or
<input data-ng-init="fname=eUser.firstname" type="text" class="form-control" id="fname" ng-model="fname" name="fname" ng-minlength='3' required>
<div ng-show='editContacForm.fname.$error.minlength' class='error'>Enter atleast 3 characters</div>