Validate username before submitting form

Question

Hi in my code I have sign up page I don't know how to validate username before submitting the form like I want username length greater than 7
After finish writing the username I want to get the success or error message anywhere on page
The form I want is just like google use while sign up process they tell us user name is already taken before submitting the form

https://code.sololearn.com/WFrHDCpul4SB/?ref=app

Answer 1

Use event Blur and also use Key down with checking on enter. In both function make check

Answer 2

Any sort of client side validation on input fields which are text can be easily done using..

"pattern" attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

But here's a problem,

In order to use pattern attribute one must know the use of regular expressions to write validation on strings like -
- length > 7
- all caps
- no numbers
- or complicated regular expressions for emails.

Solution:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2HiD

This awesome free 16 video tutorial on YouTube from one of my favorite instructors. In this tutorial for the first 10 vids you ll study basic regex, then next 6 videos on making a simple form ( like the one you are doing) and will use those regex knowledge to implement client side validation using pattern attribute.

Answer 3

Saad Mughal I can guarantee that this tutorial will help you solve your problem.

Moreover learning regular expressions will add a ton of xp in your programming game. Regular expressions are used in every programming language and makes our life super easy when working with strings.

In the end when you will see the email validation regular expression being written in video 15 and you are able to get it completely then consider it a great achievement 👍

Answer 4

Morpheus thanks bro i practicing my self on forms hope this really helps me

Answer 5

Morpheus yes I know how to work with regular expressions
And I will spent next few days working with forms and regular expressions. But last time when i am learning regular expression I got some problem and nobody answer that
https://www.sololearn.com/discuss/2305283/?ref=app

Answer 6

Ja Play Thanks

Answer 7

乂۝丹ⓨㄩک廾۝乂〖թг๏〗 I want to check validation before submitting form

Answer 8

You should link on blur and keydown to requested input. On blur and on keydown(with enter check) just check. If you enter something and your input lostfocus blur function will be used if you input some text and press enter also check function will be used

Answer 9

Ja Play please use querySelector instead of getElementById, this function more optimized!
Also after getting value x make trimming before check on empty, since if you enter f.e. 5 spaces it will be not empty string

Answer 10

Also Im really confuse why web developers do not use do{}while(false) koncept instead of if else if else combination. It is more good when you have only 1 return from function instead of 3 retuen points

Answer 11

Ja Play no idea of onBlur is used in many webpages and it is more convient to use it instead of old variand checking on submit.

Why?! Because when you enter name surname password year and other info on registration, imagine that you enter 10 values press submin and get error. ))) So in modern world as i can say such words(sorry for english)
When you put some text in input you get the base checking like this user already exists, or incorrect length, or incorrect values.

Submit has also checking but already other checkings more advansed if i can say

Answer 12

Ja Play your variant also good when you need enter 1 or 2 inputs.
But in this concrete problem mister Saad wanted imediatelly check and not on submit

Answer 13

Ja Play when we use onsubmit and enter invalid username than all the information on the form get clear like password and email
Then we have to re write all the things
So I am trying to overcome this problem using onblur or onkeydown it tells us immediately whether our username is valid or not like if you go to google sign up form and write some thing on username you know immediately whether name is available or not

Answer 14

When the submit button is clicked get the value of user input and check whether the length is greater then 7 or not if yes go on If false throw a swal or alert

Answer 15

george OK let me try

Answer 16

george Thanks bro now I did it what I was trying to do

Answer 17

I simply have to use onblur event this means when I finish writting username a function is called which checks my username is valid or not. so that's how we check username is valid or not without submit the forms. thanks to george
/*Enter your name: <input type="text" id="fname" onblur="myFunction()">*/

Answer 18

Also use onkeydown with checking on enter button press since when you type some data and press enter you wait check imediatelly. Make same onkeydown(event) check on event key and take data from event.target.value directly to know what you write

Answer 19

Correctly the statement onSubmit will be called in the form. After that all will work. Please replace as follows:

<form onSubmit="return setValues();">

function setValues() {
var x = document.getElementById("uname").value;
if (x == "") {
alert("This must be filled out");
return false;
} else if (x === 'Japlay') {
console.log(x);
return true;
} else {
alert("unknown name");
return false;
}
}

Answer 20

george thanks really nice suggestions