check text box value is according to a prefix - javascript

I have text box.
Users can enter Student Id into that.
Student id is in this format DIP0001.
First three letters should be DIP and the remaining 4 digits should be numeric and can only upto 4 characters.
So how can I check whether entered data is in this format using javascript.
Please help.....

You could build a regular expression pattern and test it against that value to see if it matches that exact pattern.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<label for="studentId">Student ID</label>
<input id="studentId" type="text">
<button id="btn" type="button">Validate</button>
// Embedded script so that you don't have to load an external file
<script>
var input = document.getElementById('studentId');
var btn = document.getElementById('btn');
var pattern = /DIP+\d{1,3}/g;
btn.addEventListener('click', function(){
if(pattern.test(input.value)) {
alert('It enter code here`atches!');
}else {
alert('It does not match!');
}
});
</script>
</body>
</html>
JS FILE:
// This pattern looks something like this: DIP0000
var pattern = /DIP+\d{1,3}/g;
// studentId is the ID of the input field that contains the Student ID
var studentIdInput = document.getElementById('studentId');
// Check the pattern against the provided Student ID
if(pattern.test(studentIdInput.value)) {
alert('It matches the pattern!');
}
EDIT 1: I have built the functionality in the following JSFiddle: http://jsfiddle.net/vldzamfirescu/QBNrW/
Hope it helps!
EDIT2: I have updated the JSFiddle to match any other combinations up to 4 digits; check it out: http://jsfiddle.net/vldzamfirescu/QBNrW/1/ Let me know if it solved your problem!

try this code
<html>
<head>
<script>
function validate(val) {
if (val.value != "") {
var filter = /^[DIP]|[dip]+[\d]{1,4}$/
if (filter.test(val.value)) { return (true); }
else { alert("Please enter currect Student Id"); }
val.focus();
return false;
}
}
</script>
</head>
<body>
<input id="Text1" type="text" onblur="return validate(this);" />
</body>
</html>

Use Regular Expresions.
If found a valid Student ID, the pattern will return true:
function validateStudentId(id) {
var re = /DIP[0-9]{4}/;
return re.test(id);
}
// Edited for use with a click event:
document.getElementById('button').addEventListener('click', function(){
if( validateStudentId(document.getElementById('textBox').value) ){
alert('correct');
}else{
alert('invalid ID');
}
});

Related

Javascript form validating and prevent submission

How can I prevent submision if in my text field are entered just specific characters <>{} and not all of special characters? I'm losing my mind :/
I think you are looking for regex expression. Let me know if it's helpful
$(":input").each(function() {
var input = $(this).val();
var regex = new RegExp("^[a-zA-Z]+$");
if(regex.test(input)) {
alert("true");
} else {
alert("false");
return false;
}
})
I don't have an exact answer as you didn't post any sample code. I can only point you to this article https://javascript.info/bubbling-and-capturing which explain how events bubbling works. A solution will be to use event.stopPropagation() in case the validation doesn't pass.
Here an working ex:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
const regex = new RegExp('^[a-zA-Z]+$');
const input = document.forms['someForm']['somename'].value;
if (regex.test(input)) {
console.log("true");
} else {
console.log("false");
return false;
}
}
</script>
</head>
<body>
<form name="someForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="somename">
<input type="submit" value="Submit">
</form>
</body>
</html>

Javascript help needed for simple form validation

I am currently trying to create a very simple validation script with JS. Basically, I want a alert to come up if the text inputted into a form is shorter than 5 characters, or longer than 25.
<!doctype html>
<html>
<head>
<title>Password Validator</title>
</head>
<body>
<script>
function validate()
{
var yourpw = document.forms.passwordform.yourpassword.length;
if (yourpw < 5);
{
alert("password is too short");
return false;
}
if (yourpw > 25)
{
alert("your password is too long")
return false;
}
}
</script>
<h1>Password Validator</h1>
<p>Please create a new password below</p>
<p>Be sure you password follows these guidelines</p>
<ul>
<li>No shorter than 5 characters</li>
<li>No longer than 25 characters</li>
</ul>
<br>
<form name="passwordform" method="post" onsubmit="validate();">
<input type="text" name="yourpassword">
<br>
<input type="submit">
</form>
</body>
</html>
I am not sure what exactly I am missing or why it wont work but the goal of what i want is that when text is inputted into the text box named "yourpassword", a script will run that will show a message if either one of these conditions are met: shorter than 5 characters, or longer than 25, warning the person typing that their password does not follow the guidelines, if the password meets the guidelines, then i just want a simple confirmation message to appear. Anyways i appreciate any help as this is frustrating me and making me want to give up learning JS. Thanks
you need to first prevent the default behavour of form submit .
use
function validate(e)
{
e.preventDefault();
var yourpw = document.forms.passwordform.yourpassword.value.length;
... rest of code
}
Try updating your validate function to as follows:
function validate(e) {
e.preventDefault();
var yourpw = document.getElementsByName('yourpassword')[0].value.length;
if (yourpw < 5) {
alert("password is too short");
return false;
}
if (yourpw > 25) {
alert("your password is too long")
return false;
}
}
You need to grab the input fields value, as mentioned, the input field does not have a length (#Xufox) as well as prevent the default behavior for form submission.
Edit:
Full working example:
<!doctype html>
<html>
<head>
<title>Password Validator</title>
</head>
<body>
<script>
function validate(e) {
e.preventDefault();
var yourpw = document.getElementsByName('yourpassword')[0].value.length;
if (yourpw < 5); {
alert("password is too short");
return false;
}
if (yourpw > 25) {
alert("your password is too long")
return false;
}
}
</script>
<h1>Password Validator</h1>
<p>Please create a new password below</p>
<p>Be sure you password follows these guidelines</p>
<ul>
<li>No shorter than 5 characters</li>
<li>No longer than 25 characters</li>
</ul>
<br>
<form name="passwordform" method="post" onsubmit="validate(event);">
<input type="text" name="yourpassword">
<br>
<input type="submit">
</form>
</body>
</html>
Use this : but give id name yourpassword to input field .. So you can take the value easily
var yourpw = document.getElementById("yourpassword").value;
var len = yourpw.length;
If ( len < 5 )
{
alert ("this is short");
}
elseif(len>25)
{
alert(" too long")
}
else
{
//// your code
}
You can easily validate forms via RegExp.
use this function for validate 5 character limit.
var pw = document.getElementById("yourpassword").value;
function isValidatePW(PW){
var pwRegExp - /\d{5}/
return pwRegExp.test(PW);
}

Javascript live validation

I have a very simple HTML/JavaScript form that I am working on for coursework, I have got it to work however i would like it to validate the input as the user types (my validation appears below the text field) how can I achieve this? My code is as follows:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<meta charset=utf-8 />
<title>Email Validation</title>
</head>
<body>
<form onsubmit='validate(); return false;'>
<p>Enter an email address:</p>
<input id='email' placeholder="example#example.com" size="21">
<button type='submit' id='validate'>Submit</button>
</form>
<br />
<h2 id='result'></h2>
<script>
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var email = $("#email").val();
if (validateEmail(email)) {
$("#result").text(email + " is valid");
$("#result").css("color", "green");
} else {
$("#result").text(email + " is not valid");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
</script>
</body>
</html>
For methods not using jQuery, in case you're interested, there's another Stack Overflow question here: On Input Change Event.
There are many ways to do what you want listed there, but in this case you could do something like this:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
// Check input.value for what you're looking for here
});
See the jsFiddle that Drew Noakes' made in that other page for an example.
But, since you're using jQuery, then Nicholas Kyriakides's suggestion is the way to go.

HTML Javascript converter program

I am trying to create a simple HTML program that will allow the user to input a number or word, then if the userInput matches what I have defined, it changes that input to something else, then outputs the new value on the screen.
Also looking for a button to reset the program (at any time to start over)
Any ideas?
<!DOCTYPE html>
<html>
<body>
<h1>Value Converter</h1>
<input type="text" id="userInput"=>Enter the Value</input>
<button onclick="test()">Submit</button>
<script>
function test() {
var userInput = document.getElementById("userInput").value;
//Need to add If, else if, else to change the value of userInput
// for example, If xxxx value, set to yyyy, then output yyyy
document.write(userInput);
}
// Need to add a "reset" to go back to restart the program
</script>
</body>
</html>
Working better now with... but where does the reset go? How do I format the output? all noob questions yes
<!DOCTYPE html>
<html>
<body>
<h1>Value Converter</h1>
<input type="text" id="userInput"=>Enter the Value</input>
<button onclick="test()">Submit</button>
<script>
function test()
{
var userInput = document.getElementById("userInput").value;
if(userInput == "xxxx") {
userInput="yyyy";
}
else if(userInput == "yyyy") {
userInput="zzzz";
}
else {
userInput="Not Found";
}
document.write(userInput);
}
// Need to add a "reset" to go back to restart the program
</script>
</body>
</html>
Convert the function to the following.
function test()
{
var userInput = document.getElementById("userInput").value;
if(userInput == "xxxx") {
// I forgot the updating part here.
document.getElementById("otherIdToWriteOutput").innerHTML = "yyyy";
}
}
You can also add the reset button. And remove the current text using
document.getElementById("id").innerHTML = ""; // remove the inner html.

Having issue to validate form using JavaScript

My following JavaScript is not working:
<script type="text/javascript">
function checkDetails(search)
{
var search = documment.getElementById('query');
if(search.value ==''||search.value==null)
{
alert('No search criteria entered');
query.focus;
return false;
}
}
</script>
</head>
<body>
<form name="search" action ="123.php" onSubmit="return checkDetails(this);" method ="get">
<p><input type ="text" id = "query" name ="query" />
<input type ="submit" value ="Web Service"/></p>
</form>
</body>
Try this code:
function checkDetails(search)
{
var search = document.getElementById('query');
if(search.value ===''||search.value===null)
{
alert('No search criteria entered');
search.focus();
return false;
}
return true;
}
You wrote documment.
You don't specify in what way it's not working - you get an error, it doesn't validate correctly, you don't get the error alert? One thing I spotted:
query.focus;
Should be
search.focus();
Also you misspelled document as documment
Also try something like this
onSubmit="return checkDetails(this,this.id);"
function checkDetails(search,id)
{
var search = documment.getElementById(id);
if(search.value ==''||search.value==null)
{
alert('No search criteria entered');
query.focus;
return false;
}
}
It will be
search.focus();
instead of
query.focus;
and documment will be document

Categories

Resources