javascript驗證后如何使成功訊息出現-有解無憂

在 js 驗證正確后，我正在嘗試使用成功訊息創建一個 from。對于成功訊息，我正在使用引導程式警報。我制作了兩個檔案，第一個帶有通用驗證，我在其中放置了所有驗證函式，第二個帶有一個檢查有效是否為真的函式。如果有效為真，我嘗試創建一個條件，然后顯示成功訊息，但它不起作用。我應該使用什么樣的條件來讓它出現？

形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/validationCommon.js"></script>
    <script src="js/validationMovieForm.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet"> 
     <link rel="stylesheet" href="style.css">
    <title>Movie Form</title>
</head>
<body>
    <div id="info" class="info container-fluid">
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! You've added movie.
        </div>
    </div>
    <main>
        <form class="form" novalidate onsubmit="return validateForm();">
            
              
            <label for="movieName">Movie name: *</label>
            <input type="text" name="movieName"  id="movieName" placeholder="2-60 letters"/>
            <span id="errorMovieName" class="error-text"></span>
            
            <label for="Date">Year of release: *</label>
            <input  type="number"  name="premiere"   id="premiere" placeholder=" from 1888 to 2021"  />
            <span id="errorPremiere" class="error-text"></span>
            
            <label for="Type">Type: *</label>
            <input  type="text"  name="type"  id="type" placeholder="2-30 letters"/>
            <span id="errorType" class="error-text"></span>

            <label for="Price">Price/week: *</label>
            <input  type="number"  name="price"   id="price" placeholder="Price from 1.00 to 49.99"/>
            <span id="errorPrice" class="error-text"></span>  
            
           
    
            <div class="f-buttons">
                <p id="errorsSummary" class="error-text"></p>
                <button id="subbut" type="submit" class="btn btn-success subbut" style="margin-right: 4rem;">Add</button>
            </div>
        </form>
    </main>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<!-- <script>
     $(document).ready(function(){
            $('.subbut').click(function(){
                $('.info').show()
            }) 
        });
</script> -->
</body>
</html>

風格

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.form{
    margin: 50px;
    display: block;
    width: 300px;
}

.form select,
.form input[type="text"],
.form input[type="number"] {
  border: 1px solid #000;
  color: #000;
  border-radius: 5px;
  padding: 0.5rem;
  width: 100%;
}

.form label {
  display: block;
  margin-bottom: 0.5em;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

.form input.error-input,
.form select.error-input {
  border: 3px solid #e74c3c;
}

.error-text {
  display: block;
  font-size: .85em;
  line-height: 1rem;
  margin-left: 10px;
  color: #e74c3c;
}

.info {
    display: none;
}

驗證Common.js

function resetErrors(inputs, errorTexts, errorInfo) {
    for(let i=0; i<inputs.length; i  ) {
        inputs[i].classList.remove("error-input");
    }
    for(let i=0; i<errorTexts.length; i  ) {
        errorTexts[i].innerText = "";
    }
    errorInfo.innerText = "";
}

function checkRequired(value) {
    if (!value) {
        return false;
    }
    value = value.toString().trim();
    if (value === "") {
        return false;
    }
    return true;
}

function checkTextLengthRange(value, min, max) {
    if (!value) {
        return false;
    }
    value = value.toString().trim();
    const length = value.length;
    if (max && length > max) {
        return false;
    }
    if (min && length < min) {
        return false;
    }
    return true;
}


function checkYearBetween(value){
    if (!value) {
        return false;
    }
    value = value.toString().trim();
    const regx = /^\s*(188[8-9]|18[2-9]\d|19\d\d|200\d|201[0-9]|202[0-1])\s*$/;
    return regx.test(value);

}

function checkPriceRange(value) {
    if (!value) {
        return false;
    }
    value = value.toString().trim();
    const regx = /^\s*(([1-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]) \.\d{1,2})\s*$/;
    return regx.test(value);
}

驗證MovieForm.js


function validateForm() {

    const form = document.querySelector('form');
    const message = document.getElementById('info');

    const movieNameInput = document.getElementById('movieName');
    const premiereInput = document.getElementById('premiere');
    const typeInput = document.getElementById('type');
    const priceInput = document.getElementById('price');
        
    const errorMovieName = document.getElementById('errorMovieName');
    const errorPremiere = document.getElementById('errorPremiere');
    const errorType = document.getElementById('errorType');
    const errorPrice = document.getElementById('errorPrice');
    const errorsSummary = document.getElementById('errorsSummary');
    
    let valid = true;
    resetErrors([movieNameInput, premiereInput, typeInput, priceInput], [errorMovieName, errorPremiere, errorType, errorPrice], errorsSummary);

    if (!checkRequired(movieNameInput.value)) {
        valid = false;
        movieNameInput.classList.add("error-input");
        errorMovieName.innerText = "This field is required";
    } else if (!checkTextLengthRange(movieNameInput.value, 2, 60)) {
        valid = false;
        movieNameInput.classList.add("error-input");
        errorMovieName.innerText = "You should enter from 2 to 60 letters";
    }

    if (!checkYearBetween(premiereInput.value)) {
        valid = false;
        premiereInput.classList.add("error-input");
        errorPremiere.innerText = "This field should be number from 1888 to 2021";
    }

    if (!checkRequired(typeInput.value)) {
        valid = false;
        typeInput.classList.add("error-input");
        errorType.innerText = "This field is required";
    } else if (!checkTextLengthRange(typeInput.value, 2, 30)) {
        valid = false;
        typeInput.classList.add("error-input");
        errorType.innerText = "You should enter from 2 to 30 letters";
    }

    if (!checkPriceRange(priceInput.value)) {
        valid = false;
        priceInput.classList.add("error-input");
        errorPrice.innerText = "Price must be a number from 1.00 to 49.99";
    }
    
    if(valid){
        form.addEventListener('submit', (e) =>{
            e.preventDefault();
            message.classList.add('show');
        });
    }

    if (!valid) {
        errorsSummary.innerText = "Form contains errors";
    }
    
    return valid;     
       
    
}

uj5u.com熱心網友回復：

使用 js 將 css 添加到成功文本：
show：

/* element */ .style.display = 'block';

隱藏：

/* element */ .style.display = 'none';

uj5u.com熱心網友回復：

無需在 CSS中手動設定.infodiv display:none;，只需使用 bootstrap 類即可.d-none。
成功驗證后，.show只需洗掉.d-none該類，而不是添加類。
成功驗證后，您將添加一個新的事件處理程式，這意味著必須再次提交表單才能運行任何新代碼。因此，只需洗掉額外的事件處理程式。
最后，您的表單將提交，這將在驗證成功時導致頁面重新加載（因為您正在回傳valid，這將是真的）。這意味著無論如何都不會顯示您的資訊 div。您需要回傳 false 以防止表單實際提交。

// validationCommon.js

function resetErrors(inputs, errorTexts, errorInfo) {
  for (let i = 0; i < inputs.length; i  ) {
    inputs[i].classList.remove("error-input");
  }
  for (let i = 0; i < errorTexts.length; i  ) {
    errorTexts[i].innerText = "";
  }
  errorInfo.innerText = "";
}

function checkRequired(value) {
  if (!value) {
    return false;
  }
  value = value.toString().trim();
  if (value === "") {
    return false;
  }
  return true;
}

function checkTextLengthRange(value, min, max) {
  if (!value) {
    return false;
  }
  value = value.toString().trim();
  const length = value.length;
  if (max && length > max) {
    return false;
  }
  if (min && length < min) {
    return false;
  }
  return true;
}


function checkYearBetween(value) {
  if (!value) {
    return false;
  }
  value = value.toString().trim();
  const regx = /^\s*(188[8-9]|18[2-9]\d|19\d\d|200\d|201[0-9]|202[0-1])\s*$/;
  return regx.test(value);

}

function checkPriceRange(value) {
  if (!value) {
    return false;
  }
  value = value.toString().trim();
  const regx = /^\s*(([1-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]) \.\d{1,2})\s*$/;
  return regx.test(value);
}

// validationMovieForm.js

function validateForm() {

  const form = document.querySelector('form');
  const message = document.getElementById('info');

  const movieNameInput = document.getElementById('movieName');
  const premiereInput = document.getElementById('premiere');
  const typeInput = document.getElementById('type');
  const priceInput = document.getElementById('price');

  const errorMovieName = document.getElementById('errorMovieName');
  const errorPremiere = document.getElementById('errorPremiere');
  const errorType = document.getElementById('errorType');
  const errorPrice = document.getElementById('errorPrice');
  const errorsSummary = document.getElementById('errorsSummary');

  let valid = true;
  resetErrors([movieNameInput, premiereInput, typeInput, priceInput], [errorMovieName, errorPremiere, errorType, errorPrice], errorsSummary);

  if (!checkRequired(movieNameInput.value)) {
    valid = false;
    movieNameInput.classList.add("error-input");
    errorMovieName.innerText = "This field is required";
  } else if (!checkTextLengthRange(movieNameInput.value, 2, 60)) {
    valid = false;
    movieNameInput.classList.add("error-input");
    errorMovieName.innerText = "You should enter from 2 to 60 letters";
  }

  if (!checkYearBetween(premiereInput.value)) {
    valid = false;
    premiereInput.classList.add("error-input");
    errorPremiere.innerText = "This field should be number from 1888 to 2021";
  }

  if (!checkRequired(typeInput.value)) {
    valid = false;
    typeInput.classList.add("error-input");
    errorType.innerText = "This field is required";
  } else if (!checkTextLengthRange(typeInput.value, 2, 30)) {
    valid = false;
    typeInput.classList.add("error-input");
    errorType.innerText = "You should enter from 2 to 30 letters";
  }

  if (!checkPriceRange(priceInput.value)) {
    valid = false;
    priceInput.classList.add("error-input");
    errorPrice.innerText = "Price must be a number from 1.00 to 49.99";
  }

  

  if (valid) {
    message.classList.remove('d-none');
  }

  if (!valid) {
    errorsSummary.innerText = "Form contains errors";
  }

  // return valid;
  return false;


}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.form {
  margin: 50px;
  display: block;
  width: 300px;
}

.form select,
.form input[type="text"],
.form input[type="number"] {
  border: 1px solid #000;
  color: #000;
  border-radius: 5px;
  padding: 0.5rem;
  width: 100%;
}

.form label {
  display: block;
  margin-bottom: 0.5em;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

.form input.error-input,
.form select.error-input {
  border: 3px solid #e74c3c;
}

.error-text {
  display: block;
  font-size: .85em;
  line-height: 1rem;
  margin-left: 10px;
  color: #e74c3c;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

<div id="info" class="info container-fluid d-none">
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Success! You've added movie.
  </div>
</div>
<main>
  <form class="form" novalidate onsubmit="return validateForm();">


    <label for="movieName">Movie name: *</label>
    <input type="text" name="movieName" id="movieName" placeholder="2-60 letters" />
    <span id="errorMovieName" class="error-text"></span>

    <label for="Date">Year of release: *</label>
    <input type="number" name="premiere" id="premiere" placeholder=" from 1888 to 2021" />
    <span id="errorPremiere" class="error-text"></span>

    <label for="Type">Type: *</label>
    <input type="text" name="type" id="type" placeholder="2-30 letters" />
    <span id="errorType" class="error-text"></span>

    <label for="Price">Price/week: *</label>
    <input type="number" name="price" id="price" placeholder="Price from 1.00 to 49.99" />
    <span id="errorPrice" class="error-text"></span>



    <div class="f-buttons">
      <p id="errorsSummary" class="error-text"></p>
      <button id="subbut" type="submit" class="btn btn-success subbut" style="margin-right: 4rem;">Add</button>
    </div>
  </form>
</main>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396004.html

標籤：javascript html css 验证

上一篇：如何使用innerHTML使用函式更改影像的描述？

下一篇：為什么在Selenium-chromedriver測驗軟體中沒有顯示特殊的cookie-banner？