Проблема с проверкой изменения цвета текста в коде формы - PullRequest
Новая
       11

Проблема с проверкой изменения цвета текста в коде формы

1 голос
/ 04 июля 2019

Я пытался разработать для, который принимает электронную почту и пароль и изменяет (на данный момент), только если электронная почта является электронной почтой, проверяя, добавил ли пользователь «@» в представлении. Предположительно, если «@» отсутствует, то тег абзаца, который содержит заголовок текстового поля «электронная почта», должен изменить цвет. К сожалению, это не так, и я понятия не имею, почему это так. Я пробовал несколько разных способов изменить цвет, но все не удалось. Это сделало бы мой день, если бы кто-то мог помочь мне с этой проблемой.

Я уже пытался использовать разные методы проверки и разные методы для изменения стиля тега абзаца. Например, я попытался использовать отдельный код стиля, который абзац должен был переключить два из кода стиля по умолчанию, когда символ "@" не был найден. Я также пытался использовать разные времена, в которые js-код работал бы как onSubmit или onBlur. Эти изменения не решили мою проблему. 

     html, body { height: 100%; }
       body {
         background:radial-gradient(ellipse at center, 
         rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #ffffff 100%);
         overflow: hidden;
         }

         .ocean { 
            height: 5%;
            width:100%;
            position:absolute;
            bottom:0;
            left:0;
            background: #ffffff;
          }

         .wave {
            background: url(https://s3-us-west- 
           2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
           position: absolute;
           top: -198px;
           width: 6400px;
           height: 198px;
           animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
           infinite;
           transform: translate3d(0, 0, 0);
          }

        .wave:nth-of-type(2) {
          top: -175px;
          animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
          -.125s infinite, swell 7s ease -1.25s infinite;
          opacity: 1;
         }

        @keyframes wave {
         0% {
           margin-left: 0;
            }
         100% {
           margin-left: -1600px;
            }
           }

        @keyframes swell {
        0%, 100% {
           transform: translate3d(0,-25px,0);
         }
        50% {
         transform: translate3d(0,5px,0);
            }
           }

         .loginbox
        {
         width: 340px;
         height: 360px;
         background: #000;
         color: #fff;
         top: 50%;
         left:50%;
         position: absolute;
         transform: translate(-50%, -50%);
         box-sizing: border-box;
       }
      h2
       {
         margin: 0;
         padding: 0 0 20px;
         text-align: center;
         font-size: 22px; 
       }



      .loginbox input
      {
       width: 100%;
       margin-bottom: 20px;
      }

      .loginbox input[type="text"], input[type="password"]
      {
        border: none;
 
        border-bottom: 1px solid #fff;
        background: transparent;
        outline: none;
        height: 40px;
        color: #fff;
        font-size: 16px;
       }

       .loginbox input[type="submit"]
      {
        border: none;
        outline: none;
        height: 48px;
        background: #fb2525;
        color: #fff;
        font-size: 18px;
        border-radius: 20px;
       } 

       .loginbox input[type="submit"]:hover
       {
         cursor: pointer;
         background: #ffc107;
         color: #000;
       }

       .loginbox a
       {
        text-decoration: none;
        font-size: 12px;
        line-height: 20px;
        color: darkgrey;
       }

      .loginbox p
       {
         margin: 0;
         padding: 10px;
         font-weight: bold;
        }
        .loginbox a:hover
        {
          color: #ffc107;
         }
    <!DOCTYPE html>
     <html>

      <head>
	    <title>
		   Sign Up Page
	    </title>
	     <link rel="stylesheet" href="style.css" media="screen"/>
      </head>

      <body>
	
	     <script>
	    	function validateForm() {
		      var x = document.forms["myForm"]["fname"].value;
		      if (x == "") {
		      alert("something must be filled out");
		      return false;
		      }
		      else if (!(x.includes("@"))) 
		     {
			   alert("");
			   document.getElementById("nameT").className="error";
		       return false;
		     }
	     	}
	     </script>

          <div class="ocean">
          <div class="wave"></div>
          <div class="wave"></div>
          </div>
          <h1>
             <center>
                Whale
             </center>
          </h1>
          <div class="loginbox">

            <h2>
              Login
            </h2>
            <form name="myForm" onsubmit="return validateForm()" 
            method="post">
                <p name="nameT"> email </p>
                <input type="text" name="fname" placeholder="enter 
                 email" onblur="validateForm()">
                 <p name="passT"> password </p>
                 <input type="text" name="name" placeholder="enter 
                 password">
                 <br>
                 <input type="submit" value="Submit">
                 <br>
                 <a href="#"> 
                    Lost your password? 
                 </a>
                 <br>
                 <a href="#"> 
                    Create an account 
                 </a>
             </form>
           </div>
       </body>

     </html>

Когда я щелкаю по электронной почте, всплывающее сообщение появляется, но текст не меняет цвет. Нет сообщений об ошибках, о которых я знаю. Это почти как изменение кода цвета пропускается.

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Вы должны изменить имя на id для электронной почты и добавить класс для ошибки, пожалуйста, проверьте следующий код 

 <script>
    function validateForm() {
      var x = document.forms["myForm"]["fname"].value;
      if (x == "") {
      alert("something must be filled out");
      return false;
      }
      else if (!(x.includes("@"))) 
     {
       alert("");
       document.getElementById("nameT").className="error";
       return false;
     }
    }
 </script>

  <div class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
  </div>
  <h1>
     <center>
        Whale
     </center>
  </h1>
  <div class="loginbox">

    <h2>
      Login
    </h2>
    <form name="myForm" onsubmit="return validateForm()" 
    method="post">
        <p id="nameT"> email </p>
        <input type="text" name="fname" placeholder="enter 
         email" onblur="validateForm()">
         <p name="passT"> password </p>
         <input type="text" name="name" placeholder="enter 
         password">
         <br>
         <input type="submit" value="Submit">
         <br>
         <a href="#"> 
            Lost your password? 
         </a>
         <br>
         <a href="#"> 
            Create an account 
         </a>
     </form>
   </div>

1 голос
/ 04 июля 2019

Вы можете попробовать вот так: 

      function validateForm() {
      
          var x = document.forms["myForm"]["fname"].value;
          if (x == "") {
          alert("something must be filled out");
          return false;
          }
          else if (!(x.includes("@"))) 
         {
           alert("you must have to filled value with @");
           document.getElementById("nameT").style.color="red";
           return false;
         }
        }
 html, body { height: 100%; }
   body {
     background:radial-gradient(ellipse at center, 
     rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #ffffff 100%);
     overflow: hidden;
     }

     .ocean { 
        height: 5%;
        width:100%;
        position:absolute;
        bottom:0;
        left:0;
        background: #ffffff;
      }

     .wave {
        background: url(https://s3-us-west- 
       2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
       position: absolute;
       top: -198px;
       width: 6400px;
       height: 198px;
       animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
       infinite;
       transform: translate3d(0, 0, 0);
      }

    .wave:nth-of-type(2) {
      top: -175px;
      animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
      -.125s infinite, swell 7s ease -1.25s infinite;
      opacity: 1;
     }

    @keyframes wave {
     0% {
       margin-left: 0;
        }
     100% {
       margin-left: -1600px;
        }
       }

    @keyframes swell {
    0%, 100% {
       transform: translate3d(0,-25px,0);
     }
    50% {
     transform: translate3d(0,5px,0);
        }
       }

     .loginbox
    {
     width: 340px;
     height: 360px;
     background: #000;
     color: #fff;
     top: 50%;
     left:50%;
     position: absolute;
     transform: translate(-50%, -50%);
     box-sizing: border-box;
   }
  h2
   {
     margin: 0;
     padding: 0 0 20px;
     text-align: center;
     font-size: 22px; 
   }



  .loginbox input
  {
   width: 100%;
   margin-bottom: 20px;
  }

  .loginbox input[type="text"], input[type="password"]
  {
    border: none;

    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
   }

   .loginbox input[type="submit"]
  {
    border: none;
    outline: none;
    height: 48px;
    background: #fb2525;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
   } 

   .loginbox input[type="submit"]:hover
   {
     cursor: pointer;
     background: #ffc107;
     color: #000;
   }

   .loginbox a
   {
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgrey;
   }

  .loginbox p
   {
     margin: 0;
     padding: 10px;
     font-weight: bold;
    }
    .loginbox a:hover
    {
      color: #ffc107;
     }
<!DOCTYPE html>
 <html>

  <head>
    <title>
       Sign Up Page
    </title>
     <link rel="stylesheet" href="style.css" media="screen"/>
  </head>

  <body>



      <div class="ocean">
      <div class="wave"></div>
      <div class="wave"></div>
      </div>
      <h1>
         <center>
            Whale
         </center>
      </h1>
      <div class="loginbox">

        <h2>
          Login
        </h2>
        <form name="myForm" onsubmit="return validateForm()" 
        method="post">
            <p id="nameT"> email </p>
            <input type="text" name="fname" placeholder="enter 
             email" onblur="validateForm()">
             <p name="passT"> password </p>
             <input type="text" name="name" placeholder="enter 
             password">
             <br>
             <input type="submit" value="Submit">
             <br>
             <a href="#"> 
                Lost your password? 
             </a>
             <br>
             <a href="#"> 
                Create an account 
             </a>
         </form>
       </div>
   </body>

 </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...