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

Question

我只是在做一个反向单词挑战。我有代码并且一切正常我只需要创建一个验证，要求用户输入某种类型的文本。目前，如果您在字段中没有任何文本的情况下单击提交，它仍然会返回它是回文。不确定要在其中添加什么来请求一些文本或告诉用户他们需要输入文本。

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

有几种方法可以解决这个问题。

您可以禁用该按钮以阻止用户提交该按钮。输入标签有一个disabled 属性，可以设置它来阻止用户提交表单。您可以在每个keyUp 上运行一个函数来检查输入的长度，如果为空，则将提交按钮设置为禁用。

<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;
        }
    }
}

这是一个用户友好的解决方案，因为它暗示输入是必需的，并防止用户提交空白或空格输入。

您还可以在主提交函数中包含一个检查器，如果输入为空，它可以阻止函数的其余部分运行。

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

这也是一个有效的解决方案，建议同时使用。

Answer 2

如果我得到你想要的，它可能会帮助你：

刚刚添加

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

检查输入长度。

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>