Проверка правильности формы для пустой строки с использованием красной рамки вокруг этого конкретного поля - PullRequest
Новая
       4

Проверка правильности формы для пустой строки с использованием красной рамки вокруг этого конкретного поля

0 голосов
/ 02 мая 2020

Я создал функцию, если одно из полей формы пусто, оно будет показывать красную рамку вокруг этого поля и отображать текст ошибки, связанный с этим полем. Но когда остается только одно пустое поле, это прекрасно показывает ошибку, но граница появляется и во всех других полях. Итак, это проблема, я хочу, чтобы граница появлялась только для этого пустого поля

[это ссылка на мой код, здесь по этой ссылке вы можете заполнить три поля, а последнее поле пусто, и я хочу, чтобы красная граница появлялась только для этого поля, а не для других полей] [1] 

[1]: https://jsfiddle.net/gurkiran/kf5m6bsa/

1 Ответ

1 голос
/ 02 мая 2020

Вы можете проверить это решение. Я изменил вашу border функцию. 

const form = document.querySelector("form");
const input = document.querySelectorAll("input");

form.addEventListener("submit",e =>{
    e.preventDefault();
    border();
    const firstName = form.firstName.value.trim();
    const lastName = form.lastName.value.trim();
    const email = form.email.value.trim();
    const password = form.password.value.trim();
    const nameReg = /[a-zA-Z]{3,}/;
    const emailReg =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
    
    if (firstName === "" && lastName === "" && email === "" && password === ""){
        first()
        last()
        mail()
        pass()
    } else if (lastName === "" && email === "" && password === ""){
        last();
        mail();
        pass();

    }else if ((email === "" || email === emailReg) && (password === "")){
        mail();
        pass();
    }
     else  if (firstName === ""){
         first()

    } else if (lastName === ""){
        last();
    } else if (email === ""){
         mail();
    } else if (password === ""){
        pass();
    }else{
        form.reset();
    }
})
///First Name Text
const first = () =>{
    form.firstName.placeholder = "";
}
// Last name Text
const last = () =>{
    form.lastName.placeholder ="";
}
// Email
const mail = () =>{
    form.email.placeholder = "email@example/com";
    form.email.setAttribute("class","placeholder"); 
}
//Password Text
const pass = () =>{
    form.password.placeholder ="";
}
/// Border for the input fields
const border = () =>{
    input.forEach((field)=>{
    let errorMsg = form.querySelector(`input[name="${field.name}"] ~ div.errorMessage`);
    let errorImg = form.querySelector(`input[name="${field.name}"] ~ img[alt="error"]`);
    		if(field.value.trim().length <= 0) {
          field.style.border ="2px solid hsl(0, 100%, 74%)";
          errorMsg.style.display = 'block';
          errorImg.style.display = 'initial';
        } else {
        		field.style.border = '';
            errorMsg.style.display = 'none';
            errorImg.style.display = 'none';
        }
    }
)};
*,
*:focus,
*::before,
*::after {
  margin: 0;
  padding: 0;
  outline: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-image: url(../images/bg-intro-desktop.png);
  background-color: #ff7a7a;
  font-family: 'Poppins', sans-serif;
  height: 100%;
  width: 100%;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33% 40%;
      grid-template-columns: 33% 40%;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.h2 {
  color: white;
  font-weight: bolder;
  font-size: 3.2em;
}

.paragraph {
  color: white;
  font-size: 0.9em;
}

#firstH2 {
  margin-bottom: -14px;
}

.box {
  background-color: white;
  border-radius: 10px;
  text-align: center;
  height: auto;
  -webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
}

.firstButton {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  border: 0;
  color: white;
  background-color: #6055a5;
  font-size: 1.1em;
  padding: 16px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
  font-weight: bolder;
}

.firstButton span {
  font-size: 0.8em;
  font-weight: normal;
}

input {
  font-family: 'Poppins', sans-serif;
  width: 90%;
  padding: 15px;
  font-size: 1em;
  border: 1px solid #b9b6d3;
  border-radius: 5px;
  font-weight: 600;
  color: #3e3c49;
}

input:focus {
  font-family: 'Poppins', sans-serif;
  font-size: 1em;
  padding: 15px;
  border: 1px solid black;
  border-radius: 5px;
  font-weight: 600;
  color: #3e3c49;
}

input::-webkit-input-placeholder {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

input:-ms-input-placeholder {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

input::-ms-input-placeholder {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

input::placeholder {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.placeholder::-webkit-input-placeholder {
  color: #ff7a7a;
}

.placeholder:-ms-input-placeholder {
  color: #ff7a7a;
}

.placeholder::-ms-input-placeholder {
  color: #ff7a7a;
}

.placeholder::placeholder {
  color: #ff7a7a;
}

#greenButton {
  width: 90%;
  border: 0;
  padding: 16px;
  background-color: #38cc8c;
  border-radius: 10px;
  -webkit-box-shadow: 0px 5px #26b577;
          box-shadow: 0px 5px #26b577;
}

#greenButton span {
  font-family: 'Poppins', sans-serif;
  color: white;
  font-size: 1.3em;
  font-weight: bold;
}

#greenButton:hover {
  cursor: pointer;
  background-color: #52fab1;
}

.terms {
  color: #b9b6d3;
  font-size: 12px;
  margin-top: 2%;
  text-align: center;
}

.terms span a {
  text-decoration: none;
  color: #ff7a7a;
  font-weight: bold;
}

form {
  position: relative;
}

#firstImg {
  display: none;
  position: absolute;
  top: 13%;
  right: 9%;
}

#secondImg {
  display: none;
  position: absolute;
  top: 29%;
  right: 9%;
}

#thirdImg {
  display: none;
  position: absolute;
  top: 45%;
  right: 9%;
}

#fourthImg {
  display: none;
  position: absolute;
  bottom: 33.5%;
  right: 9%;
}

.errorMessage {
  font-size: 0.8em;
  color: #ff7a7a;
  text-align: right;
  font-style: italic;
  font-weight: 500;
  margin-right: 30px;
  margin-top: -25px;
  margin-bottom: 18px;
}

#firstName {
  display: none;
}

#secondName {
  display: none;
}

#third {
  display: none;
}

#fourth {
  display: none;
}

.attribution {
  font-size: 11px;
  text-align: center;
  color: white;
}

.attribution a {
  color: #3e52a3;
}

@media only screen and (max-width: 700px) {
  body {
    background-image: url(../images/bg-intro-mobile.png);
  }
  .grid {
    -ms-grid-columns: 90%;
        grid-template-columns: 90%;
  }
  .h2, .paragraph {
    text-align: center;
  }
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>Intro component With Sign up Form</title>


</head>
<body>
  <div class="container">
    <div class="grid">
       <!-- 1st grid -->
        <div>
          <br><br><br><br><br><br><br><br>
          <h2 class="h2" id="firstH2">Learn to code by</h2>
          <h2 class="h2">watching others</h2><br>
          <p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but 
            understanding how developers think is invaluable.</p>
        </div>
         <!-- 2nd grid -->
        <div>
          <div>
            <br><br>
            <button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
            <br><br>
            <!-- box for white color -->
            <div class="box">
              <form>
                <br><br>
                <input type="text" name="firstName" placeholder="First Name"><br><br>
                <img src="../images/icon-error.svg" id="firstImg" alt="error">
                <div class="errorMessage" id="firstName">First Name cannot be empty</div>

                <input type="text" name="lastName" placeholder="Last Name"><br><br>
                <img src="../images/icon-error.svg" id="secondImg" alt="error">
                <div class="errorMessage" id="secondName">Last Name cannot be empty</div>

                <input type="email" name="email" placeholder="Email Address"><br><br>
                <img src="../images/icon-error.svg" id="thirdImg" alt="error">
                <div class="errorMessage" id="third">Looks like this is not an email</div>

                <input type="password" name="password" placeholder="Password"><br><br>
                <img src="../images/icon-error.svg" id="fourthImg" alt="error">
                <div class="errorMessage" id="fourth">Password cannot be empty</div>

                <button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>

                <div class="terms">
                  By clicking the button you are agreeing to our <span><a href="#">Terms and Services</a></span>
                </div><br><br>
              </form>
            </div>

          </div>
        </div>
    </div>
  </div>

  
  <br><br>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Gurkiran Singh</a>.
    </p>
  </footer>
  <script src="js/script.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...