This question already has answers here:
Show/hide element without inline Javascript
(2 answers)
Closed 3 years ago.
I have same input class,type in several pages like the following :
<input type="text" name="studentID" id="studentID" class="form-control student-id"/>
what I want using the same class name student-id ,
it will validate student id using the following js :
function validateStudentId(){
var studentId= document.getElementsByClassName('student-id');
if (studentId.length > 0) {
var id = studentId[0].value;
console.log('lengthe'+id.length);
if(id.length > 7){
alert('Please enter valid student id .');
$('.student-id').val("");
return;
}
if(isNaN(id)){
alert('Entered input is not a number .');
$('.student-id').val("");
return;
}
}
}
To do this job I've already done the following :
<input type="text" class="form-control student-id" onchange="validateStudentId()" name="studentid" size="10" maxlength="7" />
An onchange function added. Is there any better way to do this.
coz I have to do this onchange function call every time.
So what I want is to give only class name and it will automatically validate the field using the class name.
Suggest me any better idea, Just dont want to write onchange function every time ??
Thanks
You can use document.querySelectorAll('input.student-id') to select all inputs with that class and then .forEach() on the node list to iterate over them and call the validation function on each of them.
I also replaced the jQuery calls with plain JavaScript because it's really simple for this use case. I switched the check for a numeric value to come before the length check as well, because that seems more logical to me.
function validateStudentId(inputEl) {
var studentId = inputEl;
var id = studentId.value;
console.log('length: ' + id.length);
if (isNaN(id)) {
alert('Entered input is not a number .');
inputEl.value = "";
return;
}
if (id.length > 7) {
alert('Please enter valid student id .');
inputEl.value = "";
return;
}
}
document.querySelectorAll('input.student-id').forEach(function(inputEl) {
inputEl.addEventListener('change', function() {
validateStudentId(this);
});
});
<input type="text" name="studentID" id="studentID" class="form-control student-id" value="abc" />
<input type="text" name="studentID2" id="studentID2" class="form-control student-id" value="1234567890" />
<input type="text" name="studentID3" id="studentID3" class="form-control student-id" value="123456" />
Related
I have an input with placeholder="YYYY/MM", when the user click the input to enter the data, I want the year and month to dissappear, so only "/" stays.
I already try with my code, however it doesn't work, please help/
var birthdayId = "document.querySelector("#BIRTHDAY")";
if(birthdayId.maxlength < 4){
birthdayId.value = "/";
}
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="YYYY/MM">
Run your code in a focus event listener.
You should be checking the length of the value, not the maxlength property, which never changes.
You shouldn't put the call to document.querySelector in quotes.
Don't set the default value of the input to YYYY/MM, since that will prevent the length test from working. The placeholder is used to display the desired format, you don't need to do it with value as well.
var birthdayId = document.querySelector("#BIRTHDAY");
birthdayId.addEventListener("focus", function() {
if (birthdayId.value.length < 4) {
birthdayId.value = "/";
}
});
<input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="">
Hey i need help to check if email is vaild email...
I tried it with javascript and i dont know how to do it...
Can someone help me to make it please?
My HTML Code :
<input type="text"name="email1" id="MyEmail" placeholder = "Your Email"/>
I want to make an javascript check that the email that the people write is vaild email and if not its will alert them... Please help
i want to check if the new member that want to register to my site is putted a date and that its not empty date (without putting numbers in the date box)
Example just using inline attribute onblur
function check(text) {
var msg = 'Empty';
if (text.value.replace(/\s/g, '')) {
msg = 'Not ' + msg;
}
console.log(msg, text.value);
}
<input type="date" onblur="check(this)" />
<input type="date" onblur="check(this)" />
Above example attaching listeners
let check = function(text) {
var msg = 'Empty';
if (text.value.replace(/\s/g, '')) {
msg = 'Not ' + msg;
}
console.log(msg, text.value);
};
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelectorAll('input[type="date"]').forEach(function(date) {
date.addEventListener('blur', function(e) {
check(e.target);
});
});
});
<input type="date" /><input type="date" />
You just have add the required attribute to the input tag and remove the unnecessary slash after the max attribute like this:
<form>
<input type="date" id = "Date" min="1905-00-00" max="2019-00-00" required /><br>
<button type="submit">Submit</button>
</form>
You can completely avoid and JavaScript by just adding a preset value to the date. This way users are forced to enter a date no matter what, because the input already starts with a given value. Here is the code:
<input type="date" min="1905-00-00" max="2019-00-00" value="2018-01-01"/>
You can learn more here: https://www.w3schools.com/jsref/prop_date_value.asp
I am trying to get suggestions from input box, but if model has multiple values in wheelName like "wheel1", "wheel1", "wheel2", and with this, when I enter "wheel1" in inputbox, i get 2 suggestions as wheel1, wheel1, but i want unique suggestion i.e. wheel1 to be shown only once.
Input declaration looks like below:-
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
startSuggestion="3"
suggestionItems="{wheel>/results}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>
Assuming your results list differs with every character you type into your input, you can attach a function to the liveChange of the Input field.
You can then put your custom logic (e.g. no double names) into a separate model property. I haven't tested the code but Ii should work (provided I didn't make a typo).
View:
<Input
id="wheelInput"
type="Text"
placeholder="Enter Wheel..."
showSuggestion="true"
maxLength="40"
liveChange="filterWheelList"
startSuggestion="3"
suggestionItems="{wheel>/filteredWheelList}" >
<suggestionItems>
<core:Item text="{wheel>wheelName}"/>
</suggestionItems>
</Input>
Controller:
filterWheelList: function(){
var wheelModel = sap.ui.getCore().getModel("wheelModel");
var wheelList = wheelModel.getProperty("/results");
var uniqueNames = [];
var filteredWheelList = wheelList.filter(function(wheel){
if (uniqueNames.indexOf(wheel.wheelName) === -1){
uniqueNames.push(wheel.wheelName);
return true;
} else {
return false;
}
});
wheelModel.setProperty("/filteredWheelList", filteredWheelList);
}
my simple html file code
Site Name: <input id="name" type="text" onkeyup="myFunction1(event,this)">
URL : <input id="url" type="text">
javascript code
function myFunction1(event,t){
var nameval= document.getElementById("name").value;
var urlval= document.getElementById("url").value;
var namelen = nameval.length;
var urllen = urlval.length;
var res = nameval.substring(1, namelen);
if(res.length == urllen){
document.getElementById("url").value = t.value;
}
else{
alert("string lengths are not matching");
}
}
what i want to do when user type Site Name in textbox, same text should reflect to URL textbox if name and url text boxes have same text lenghts . but when i speed type site name, my if condition fail after typing few characters and it goes to else block. i dont know why this happening. can anyone help me to improve this code?
Using the onkeyup event isn't your best option for what you are trying to do. You can use the oninput event instead. Here's the modified HTML:
Site Name: <input id="name" type="text" oninput="myFunction1(event,this)">
URL : <input id="url" type="text">
This question already has answers here:
Get child node index
(13 answers)
Closed 9 years ago.
I have a form with dozen of textfield elements. Any change of their values shall execute Javascript function. And until now I know what I shall to do, but I can't detect index of textfield that triggered function. I tried some solution I saw here & there but wasn't successful.
<form action="" method="post" enctype="multipart/form-data" name="myforma1" target="_self" id="myforma1">
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
...
<script>
function detect_it(oo)
{
alert('Index of triggered element is: ' + oo.index);
/* rest of code */
}
</script>
You probably shouldn't give all your inputs the same name and id.
However, you can still look for the parent node, then iterate over the parent's children until you found your node to retrieve its index.
Try this getIndex() function:
<script>
var getIndex = function (node) {
for (var i =0;i<node.parentNode.children.length;i++) {
if (node.parentNode.children[i] === node) {
return i;
}
}
}
function detect_it(oo) {
alert('Index of triggered element is: ' + getIndex(oo));
}
</script>
See this Fiddle: http://jsfiddle.net/LkJxV/
edit: corrected code (again) (thx #Felix)
Your problem here is that index is not a property of the element. It can have differnet indexes depending on context but you can try
Try something like:
function detect_it(oo){
var inputs = document.getElementsByTagName('input')
for (var i = 0 ; i<inputs.length ; i++){
if(oo == inputs[i]{
alert('Index of triggered element is: ' + i);
}
}
//enter code here
}