I have a basic form validation right now in Javascript right now. How do I format it so that whatever is typed in the input field MUST be:
Javascript:
function stockValidate() {
let x = document.getElementById("inputText3").value;
let text;
if FORMATTING HERE {
text = "Input not valid";
document.getElementById("inputText3").value = '';
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
HTML:
<div class="col-auto">
<input type="text" id="inputText3" class="form-control" aria-describedby="TextHelpInline" placeholder="e.g. AAPL"/>
</div>
<div class="col-auto">
<button id="inputTextBtn3" class="btn set-btn" onclick="stockValidate()">Add</button>
</div>
<p id="demo"></p>
I would try that way of solving the issue:
Add validation only for capital letter and numbers
Since you included your html code I would even call the way using the pattern-attribute the simple way to do this validation.
As per @Graficode's tips, here is the final code:
function stockValidate() {
var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,<>\/?~]/;
let x = document.getElementById("inputText3").value;
let text;
if (x.toUpperCase() != x) {
document.getElementById('demo').style.display = "block";
text = "Stock symbol must be uppercase";
document.getElementById("inputText3").value = '';
}
else if (x === '') {
document.getElementById('demo').style.display = "block";
text = "No blanks"
}
else if (x.includes(' ')) {
text = "No spaces";
document.getElementById('demo').style.display = "block";
document.getElementById("inputText3").value = '';
}
else if (x.length > 5) {
document.getElementById('demo').style.display = "block";
text = "No more than 5 characters";
document.getElementById("inputText3").value = '';
}
else if (/\d/.test(x)) {
document.getElementById('demo').style.display = "block";
text = "No numbers allowed";
document.getElementById("inputText3").value = '';
}
else if (specialChars.test(x)) {
document.getElementById('demo').style.display = "block";
text = "No special characters allowed";
document.getElementById("inputText3").value = '';
}
else {
text = "Input OK";
document.getElementById('demo').style.display = "none";
}
document.getElementById("demo").innerHTML = text;
}