如何验证我的输入字段以请求输入一些文本？

Question

I am just doing a reverse a word challenge. I have the code and all works fine I just need to create a validation that requires the user to input some type of text. At the moment if you click submit without any text in the field it still returns that it is a palindrome. Not sure what to add in there to request some text or tell the user that they need to type text.

 document.getElementById("flipBtn").addEventListener("click", function () { //Here is what happens when the button is clicked. // Step 1 - Get the Data let inputWord = document.getElementById("reverseString").value; // Step 2 - Work with the Data let lowerInput = inputWord.toLowerCase(); lowerInput = lowerInput.replace(" ", ""); let reverseWord = "" //First is the Loop Variable followed by a;. //Second part is how many times we are looping. Until the second part is false. //Third is what happens after each loop. ++ means add 1, -- = subtract 1. //[] indicates array position. //A string is an array of characters. //string word = [w][o][r][d] // 0 1 2 3 //Without the - 1 you get index out of range exception. //Maybe there is a JavaScript method to make all the letters LowerCase. //Maybe you want to store four variables, the original input, that reversed, and the lowercase version of each for comparison. for (let loop = inputWord.length - 1; loop >= 0; loop--) { reverseWord += lowerInput.charAt(loop); }; let otherReverse = lowerInput.split("").reverse().join(""); // Step 3 - Output the result if (lowerInput == reverseWord) { document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is a Palindrome`; } else { document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is not a Palindrome`; } document.getElementById("reverseString").addEventListener("keydown", function (e) { var character = (e.which)? e.which: e.keyCode; if (character >= 97 && character <= 122 || character >= 65 && character <= 90 || character == 8 || character == 9 || character == 32) { return true; } else { e.preventDefault(); return false; } }); })

 <div class="container"> <div class="row card"><span class="custfont">Reverse A String</span> <br /> <div class="col"><input class="input" type="text" id="reverseString" placeholder="Enter your text..." /></div> <br /> <div class="col"><button class="btn custbtn btn-dark button" id="flipBtn">Flip the String</button></div> <br /> <div class="col"><span id="reverseOutput"></span></div> </div> </div>

Answer 1

If I get what exactly you want, it's may help you:

Just added

if (inputWord.trim().length === 0) {
    return false;
}

To check the input length.

 document.getElementById("flipBtn").addEventListener("click", function () { //Here is what happens when the button is clicked. // Step 1 - Get the Data let inputWord = document.getElementById("reverseString").value; // Step 2 - Work with the Data let lowerInput = inputWord.toLowerCase(); lowerInput = lowerInput.replace(" ", ""); let reverseWord = "" //First is the Loop Variable followed by a;. //Second part is how many times we are looping. Until the second part is false. //Third is what happens after each loop. ++ means add 1, -- = subtract 1. //[] indicates array position. //A string is an array of characters. //string word = [w][o][r][d] // 0 1 2 3 //Without the - 1 you get index out of range exception. //Maybe there is a JavaScript method to make all the letters LowerCase. //Maybe you want to store four variables, the original input, that reversed, and the lowercase version of each for comparison. for (let loop = inputWord.length - 1; loop >= 0; loop--) { reverseWord += lowerInput.charAt(loop); }; let otherReverse = lowerInput.split("").reverse().join(""); // Step 3 - Output the result if (lowerInput == reverseWord) { document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is a Palindrome`; } else { document.getElementById("reverseOutput").innerHTML = `The word that you entered: ${reverseWord} was changed to: ${otherReverse} is not a Palindrome`; } }) document.getElementById("reverseString").addEventListener("keyup", function (e) { if ( document.getElementById("reverseString").value.length > 0 ) { document.getElementById("flipBtn").disabled = false; } else { document.getElementById("flipBtn").disabled = true; } }); <:-- begin snippet: js hide: false console: true babel: false -->

 <div class="container"> <div class="row card"><span class="custfont">Reverse A String</span> <br /> <div class="col"><input required class="input" type="text" id="reverseString" placeholder="Enter your text..." /></div> <br /> <div class="col"><button class="btn custbtn btn-dark button" disabled id="flipBtn">Flip the String</button></div> <br /> <div class="col"><span id="reverseOutput"></span></div> </div> </div>

Answer 2

There are a couple of ways to go about this.

You could disable the button to prevent the user from submitting the button. The input tag has a disabled attribute that can be set to prevent users from submiting a form. You can have a function that runs on every keyUp to check the input's length and if empty, set the submit button to disabled.

<div class="col"><input class="input" onkeyup="validate()" type="text" id="reverseString" placeholder="Enter your text..." /></div>

function validate() {
const input = document.getElementById("reverseString").value;

     if(input.trim() === "") { 
            document.getElementById('flipBtn').disabled = true; 
        } else { 
            document.getElementById('flipBtn').disabled = false;
        }
    }
}

This is a user friendly solution since it implies that the input is required and prevents users from submitting an empty or whitespace input.

You can also include a checker in the main submit function that can prevent the rest of the function to run if the input is empty.

document.getElementById("flipBtn").addEventListener("click", function () {
    let inputWord = document.getElementById("reverseString").value;
    if(!inputWord.trim()){
      return;
    }
    //...rest of logic
})

This is also a valid solution and is recommended to have both.