Form validation and simple application in javascript
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...
![[LIVE] : ONE ลุมพินี 79 | คู่เอก "ก้องชัย vs อาเมียร์"](http://i.ytimg.com/vi/WfPSA1A0NHc/mqdefault.jpg)
thank you looking for this since long time. lots of love as usual, pls keep encouraging.
Happy Labour day @hithesh :)
In the start of this video, you said that you've taught how to add listener for buttons. But, I've watched all the videos prior to this and it doesn't look like you taught that. Please check again and let us know. Thanks! :)
see the playlist in LearnCodeOnline website, you can find the link in description, all the videos are present there in order, in youtube's playlist some videos are missing
The videos are jumbled after you started web structures and JS in the playlist. Some are not there in the playlist.
I thing Currently in may-19 lot of session is missing from this play list
and its getting worst due to disorderliness in play list
please make it correct you are good teacher and it'll really efficient we learn in sequential order
Thank you.
This series is available for free with community discussion at courses.learncodeonline.in
Back to back two video 😍
function myValidation(){
let myVal =document.getElementById('myForm').value;
if(isNaN(myVal)|| myVal < 1 || myVal >20){
let changeP=document.querySelector('#one')
changeP.textContent="not valid input"
}
else{
let changeP=document.querySelector('#one')
changeP.textContent="input OK"
}
}
i am following your all vedio dada.please pray for me
If I understood assignment appropriately:
function myValidation() {
let myValue = document.getElementById('myform').value
let valueToChange = document.getElementById("idone")
/*
let myValue = document.querySelector('#myform').value
let valueToChange = document.querySelector("#idone")
*/
valueToChange.textContent = myValue
}
Interesting: if input text is empty / or filled with spaces only(!) /,
then second line is deleted, and all the lines below first line are shifted up.
I misunderstood the assignment a little bit. ( I do not know how to delete youtube comment...)
Thank you, I had a question
By taking multiple inputs in FORM like name, age, number, after clicking on submit it will appear on new page with name:xyz, number:123456. with edit option also can we make like this with only using java script. please make a video on this.
thank you
We love u sir. Nd love this series
function valid(){
let value = document.getElementById('box').value;
alert(typeof value)
if(isNaN(value) || value20 )
{
alert("Login Done")
}
else if(name=''){
alert("try agin")
}
}
//console.log(`${name}`)
This is treating value as a string!! what should i do????????????
And shows login done everytime
@Hitesh Sir i can't figure out how to solve the assignment......please help
Writing the script only here...
var output = document.getElementById("idone");
var input = document.getElementById("myform");
var btn = document.querySelector("button");
btn.addEventListener("click", function(e) {
var value = input.value;
output.innerText = (isNaN(value) || value < 1 || value > 20) ? "Invalid Input" : "Valid Input";
});
============================================================================
I have used Ternary Operator
Syntax:
condition ? value1 : value2;
Here value1 will be used if the condition evaluates to true or value2 otherwise.
document.querySelector('#myform').addEventListener('input',(event) => {
console.log('Your age is : ' +event.target.Value);
}
)
Here goes the assignment:
function myValidation() {
let myValue = document.getElementById('myform').value
if(isNaN(myValue) || myValue20)
document.querySelector("#idone").textContent = 'Not a valid input'
else
document.querySelector('#idone').textContent = "This input is OK!"
}
Should I use "onclick" event or "addeventlistener" for performing some action on button click?
Both are totally fine
i prefer addEventListener....but thats just me
i spent my whole day figuring out the difference in onclick and addeventlistener, i was not getting answer then i came to know onclick is inline and addevent listener is separate, addevent listener is better i guess, im not sure
if (isNaN(myValue) || myValue < 1 || myValue > 20) {
document.getElementById("idone").innerHTML = "Not a valid input "
} else {
document.getElementById("idone").innerHTML = "This input is ok"
}
Are numbers in the input classified as strings or intiger values?
Form validation with JS or with PHP?? Which one is preferred ?
Sir, as per your last assignment my code is changing the text only for once, if we try to change the text again by changing the input it is giving type error can you explain why
where is the previous video
th-cam.com/video/QedZL8kXX6Y/w-d-xo.html check it here
fggg
@@ParthKandpal thankss man
@@hometv4061 you're welcome
Bro seriously what is best java or JavaScript or PHP or python and I am so confused what should it take ...😵
Hi I am getting an Error The tag 'FORM [method=GET]' requires including the 'amp-form' extension JavaScript.
I am non technical guy can you help me how to solve it
Hii I need help to generate 5 random number using js and at the end addition of 5 random numbers plz help
let sum = 0;
for(i=0;i
In which vedio the listener is mentioned??
const myPElement = document.querySelector('change')
change.textContent= 'not valid input'
Google AIY kit ke bare me plz video ya phir tutorial banao
function validate() {
let newText;
let value = document.querySelector('#search').value;
let modifier = document.querySelector('#modifyMe');
if (isNaN(value) || value < 1 || value > 20) {
newText = "Invalid Entry"
}
else {
newText = "WOWW";
}
modifier.textContent = newText
}
document.querySelector('#text1').addEventListener('input',(event)=>{
let a2=document.querySelector('#p1').innerHTML=event.target.value
if(a2>=1&&a2
again one more video containing listener (click ..)missing or misplaced..so m not able to understand this video
th-cam.com/video/QedZL8kXX6Y/w-d-xo.html
Hey hitesh, got a doubt
When we are getting the value by getElementById function why are we not using # before the id name,
Like why don't we write
let myValue = document. getElementById( '#myForm' ).value.
Mradul Gupta Mradul Gupta dont need the "#" hashtags in js when getting element by id....the hashtag is used in css to signify the id attribute in the html element in order to style it...it would be repetitive to use it in getElementById() method....and querySelector() is used to select an css rule ...there you can use an ". or #" to signify class or id. but in cases of getElementsByClass(), or getElementById() those are not needed and would probably cause a syntax error
crunckNATIon thanks for the explanation.
const myelement = document.getElementById('Idone')
console.log(
myelement.textContent = 'not a valid input');
Which is your text editor?
theres no `change` in MDN for some reason.
Bro I don't understand the condition myvalue20
function myValidation(){
let myValue = document.querySelector('#myform').value;
if (isNaN(myValue)|| myValue < 1 || myValue > 20) {
let text = document.querySelector('#html')
text.textContent = 'not a valid input';
}
else{
text = document.querySelector('#html')
text.textContent = 'this was ok';
}
}
function myValidation() {
let myValue = document.getElementById('myform').value
if (isNaN(myValue) || myValue < 1 || myValue > 20) {
console.log('Not a valid input');
const myPElements = document.getElementById('idone');
myPElements.textContent = "Not a valid input"
} else {
console.log('This input is ok');
const myPElements = document.getElementById('idone');
myPElements.textContent = "This input is ok"
}
}
Osm dude
function myValidation() {
let myValue = document.querySelector('#myform').value
console.log(myValue);
}
if(isNaN(myValue) || myValue < 1 || myValue > 20){
let valid = document.querySelector('#idone')
valid.textContent = 'not a valid input'
} else {
let valid = document.querySelector('#idone')
valid.textContent = 'this input is ok'
}
function myvalidation(){
let myvalue=document.getElementById('myform').value;
if (isNaN(myvalue) || myvalue20) {
const newpara= document.querySelector('#idone').innerHTML='not valid input'
console.log(newpara)
}
else{
const newpara=document.querySelector('#idone').innerHTML='this was ok'
console.log(newpara)
}
}
👍
function myValidation(){
let myValue = document.querySelector('#mytextbox').value;
if(isNaN(myValue) || myValue < 1 || myValue > 20){
// console.log('invalid input')
document.querySelector('#res').textContent = 'this is an invalid input'
document.querySelector('#res').style.color = "red";
}
else{
// console.log('this is a valid input');
document.querySelector('#res').textContent = 'this is a valid input'
document.querySelector('#res').style.color = "green";
}
}
I think condition must be myvalue >1//myvalue
No.... Here in if part we are looking for not a valid input so it's correct as mentioned in video
Bro what is different between JavaScript and PHP language
JS is for client side and PHP is for server side...
Js is for interactivity and validation before it goes to the server...php actually can fetch SQL and other data from data from server and api, encrypt data, connect you to rdbms...wheres as in js you use noSql db and nodejs, express...also alot of different languages can be used for backend, but the three main langs for frontend devs are html,css, and js
//assignment
function myValidation(){
let myvalue = document.querySelector('#myform').value;
if (isNaN(myvalue) || myvalue < 1 || myvalue > 20 ) {
document.querySelector('#idone').textContent = "Not a valid input"
}else {
document.querySelector('#idone').textContent ="this input is ok";
}
}
console.log=function(dat){
document.querySelector("#idone").innerHTML=dat;
}
//😋😋😋😋
//how is my solution 😊😊 .. i am prototyping 😺
Please tell me why this is correct I am not able to know the logic
I forgot about it when I was doing the assignment, Thanx @Prashanth ❤️
@Kritika .innerHTML fatches the value from the given thing (#idone in the above example) and replaces it with whatever you put in front of equal sign (he used dat function in this example)
3rd
function myValidation(){
let myValue = document.querySelector('#myform').value
if (isNaN(myValue) || myValue 20){
var text1 = "Not a valid response"
console.log(text1);
}else
{
var text1 = "This is okkk"
console.log(text1)
}
//only to change the text of p
const myP = document.querySelector('p')
myP.textContent = text1
}