I have this code snippet:
<div>
<label for="requiredSize">Required Size 5 : </label>
<input type="text" name="requiredSize" id="requiredSize" class="required_size" minlength="5" />
</div>
I am doing a form validation exercise, and I need to have one of the requirements be based on required size. How can I call the minlength into my JavaScript file to be used, since it does change throughout the form?
I have tried document.querySelector("minlength") to try and save it as a variable, but it wasn't being recognized.
const input = document.querySelector("#requiredSize");
console.log(input.getAttribute('minlength'))
<div>
<label for="requiredSize">Required Size 5 : </label>
<input type="text" name="requiredSize" id="requiredSize" class="required_size" minlength="5" />
</div>
Related
I have two text fields like so:
<label for="origin2">
<g:message code="api.origin2.label" default="2nd Origin" />
</label>
<g:textField class="form-control" name="origin2" value="${apiInstance?.origin2}"/>
<label for="destination2">
<g:message code="api.destination2.label" default="2nd Destination" />
</label>
<g:textField class="form-control" name="destination2" value="${apiInstance?.destination2}"/>
First question (I;m new to this), how do I initially disable these text fields?
Second question, I have a checkbox:
<label for="multicity">
<g:message code="api.multicity.label" default="Multi-City" />
</label>
<g:checkBox id="multicity" onClick="toggle('multicity', 'origin2')" name="multicity" value="${apiInstance?.multicity}" checked="${false}" />
Ideally I'd like to have the above two text boxes suddenly appear if this checkbox is checked (true) but if that can't be done I just want to enable them.
How do I do this? All help vastly appreciated.
It's very simple just add readonly attr to your input field like this.
<input type="text" name="lname" readonly>
And then add your script e.g
$("#checkbox").click(() => {
$("#field1, #field2").removeAttr("readonly")
})
I have a form. In which I have input fields and I am doing some validation based on input. Also, there is a submit button which enables only if form is valid.
In this form I am enabling/disabling input field in one of the flow.
Initially, when the fields are enable and empty, create button is disabled. After i disable and enable the fields, create button becomes enabled. Although input fields are still empty.
More over button which is enabling/disabling this part is outside of this form.
Here is my code
`
<form method="post" novalidate id="example-widgets-form" name="mdnsCtrl.createSubDomainForm" valdr-type="SubDomain">
<div>
<label>Domain Name</label>
<input required type="text" name="subDomainName" placeholder="Domain Name" ng-model="mdnsCtrl.newDomain.name">
</div>
<div>
<label>Description</label>
<input type="text" name="subDomainDescription" placeholder="Description (Optional)" ng-model="mdnsCtrl.newDomain.description">
</div>
<button type="button" aria-label="Create" ng-click="mdnsCtrl.createDomain();"
ng-disabled="mdnsCtrl.createSubDomainForm.$invalid">
<span class="ng-scope">Create</span>
</button>
</div>
</form>
Tried few things like using $setUntouched() and $setPristine(). But nothing is working. Any help will be appreciated.
Adding a codepen example for this: code
Much Thanks.
`
Its not good practice to mix Angular with jQuery. Please read this great post: “Thinking in AngularJS” if I have a jQuery background?
You can easily achieve requested behavior by using ng-disabled="mdnsCtrl.formDisabled"
JS
var ctrl = this;
ctrl.formDisabled = false;
this.disable = function(){
ctrl.formDisabled = true;
};
this.enable = function(){
ctrl.formDisabled = false;
};
HTML
<div>
<label>Domain Name</label>
<input class="input-field" required type="text" name="subDomainName" placeholder="Domain Name"
ng-disabled="mdnsCtrl.formDisabled"
ng-model="mdnsCtrl.name" >
</div>
<div>
<label>Description</label>
<input class="input-field" type="text" name="subDomainDescription"
ng-disabled="mdnsCtrl.formDisabled"
placeholder="Description (Optional)" ng-model="mdnsCtrl.description">
</div>
Fixed Demo Codepen
I think you missed required attribute for Description input..
<input type="text" name="subDomainDescription" required ng-model="mdnsCtrl.newDomain.description">
I have arrived to a situation that if only one of the two required fields in the form are filled then it should submit the form. Unfortunately, if i put required on both the fields it would wait for both of them to be filled in. Can this work without using JS? I know it is nearly impossible while not knowing any of the hidden features regarding it?
Can this work without using JS?
No, you need JavaScript to do that validation client-side.
The solution requires JS, but is easy - simply toggle the .required property of the elements based on whether either of them has a value:
var t1 = document.getElementById('test1');
var t2 = document.getElementById('test2');
function toggleRequired() {
t2.required = (t1.value.trim() === '');
t1.required = (t2.value.trim() === '');
}
t1.addEventListener('change', toggleRequired, false);
t2.addEventListener('change', toggleRequired, false);
<form>
<input name="test1" id="test1" required />
<br/>
<input name="test2" id="test2" required />
<br/>
<input type="submit" />
</form>
You could also put it into one div. It did worked for me.
<form>
<div class=question>
<input id="field1_1" name="field1" required>
<input id="field1_2" name="field1" required>
<input type="submit" />
</div>
</form>
I am using abide from foundation zurb to validate inputs from the client side. I have 4 input fields that are being validated through js. I am using jquery to count .error after submit button click but I am getting unexpected values returned. After clicking the submit button twice the number of .errors shows count 8 even if there is only just 4 .errors fields. How can I display number of .errors that are visible in the form? LINK
<script>
var $error_items = 0;
$("#submit").click(function(e){
$error_items = $(".error").length;
alert($error_items);
});
</script>
HMTL
<form data-abide>
<div class="name-field">
<label>Your name <small>required</small>
<input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>
</div>
<div class="name-field">
<label>User name <small>required</small>
<input type="text" name="users_name" required pattern="[a-zA-Z]+">
</label>
<small class="error">Username is required and must be a string.</small>
</div>
<div class="email-field">
<label>Email <small>required</small>
<input type="email" required>
</label>
<small class="error">An email address is required.</small>
</div>
<div class="password-field">
<label>Password <small>required</small>
<input type="password" id="password" required pattern="password">
</label>
<small class="error">Your password must match the requirements</small>
</div>
<button type="submit" id="submit">Submit</button>
</form>
If you inspect the DOM after clicking the submit button, you will see the following for each of your error labels:
<label class="error"></label>
<small class="error"></small>
One added by you initially and the other added dynamically once the submit button is clicked. The count of 8 is correct.
You may just want to count label.error as that seems to be what you are trying to count.
You may count only the visible error labels using visible selector for instance:
$('small.error:visible').length
I've got an HTML form that's built dynamically using templates at runtime - dictated by user action.
I need to set the tab index across the form based on the tabindexing specified within each of the pieces of the form.
Given this, is there a way in jQuery to order items within a set? For instance something that follows this pseudo structure would be awesome, but I can't figure out how to achieve it:
<div name="firstTemplate" templateIndex="0">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="firstTemplateRpt" templateIndex="1">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
<div name="secondTemplate" templateIndex="2">
<input type="text" name="field0" tabIndex="1" />
<input type="text" name="field1" tabIndex="2" />
<input type="text" name="field2" tabIndex="3" />
</div>
I could then use some variation of the following concept:
$("input, textarea, select, input:checkbox, input:radio").orderBy("templateIndex, tabIndex");
Where templateIndex would be the index of the template within the form and the tabindex would be the tabindex of the control within the template. A template could be added to the form multiple times at runtime, which is causing havoc on manually specified tabindexes.
When another template is added to the form, it would be assigned the templateIndex="3" with its manually set tabIndexes starting again at 1.
Collect the divs with a templateIndex attribute into an array, then sort them like:
divArray.sort(function(a, b) {
return a.getAttribute('templateIndex') - b.getAttribute('templateIndex');
});
Then iterate over those and sort the inputs inside the array using a very similar function:
inpArray.sort(function(a, b) {
return a.tabIndex - b.tabIndex;
});
Then move the elements in the required order in the document using something like node.parentNode.insertBefore(node, firstChild).