Как добавить элемент после проверки формы? - PullRequest
Новая
       10

Как добавить элемент после проверки формы?

0 голосов
/ 05 июля 2019

Я хочу добавить текст, а также изображение, если это возможно, после того, как пользователь не введет строку с символом "@", а затем отдельный текст, сообщающий пользователю, что он не набрал электронное письмо.

Я еще ничего не пробовал.Я просто хочу получить некоторую информацию, которая укажет мне правильное направление.

Это html и js код: 

<!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("you must have to filled value with @");

                        document.getElementById("nameT").style.color="red";

                        document.getElementById("fname").classList.add('error');

                        return false;
                   }
              }
        </script>

        <div class="ocean">
            <div class="wave"/>
            <div class="wave"/>
        </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" id="fname" 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>

Это код css: 

 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;
      }
      .error{
          border-bottom:2px solid red !important;
      }

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

Ответы [ 4 ]

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

Вы можете использовать input type = 'email' и использовать шаблон и атрибут title, чтобы получить полную проверку 

<p id="nameT"> email </p>
<input type="email" id="fname" name="fname" placeholder="enter email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" title="enter valid email address" onkeyup="myFunction(event)"> 

<script>
    function myFunction(e) {
     if (e.target.validity.valid) {
       console.log('input type email is valid');
       // rest of your javascript code
    }
</script>

, таким образом, вы получите полную проверку поля электронной почты

0 голосов
/ 05 июля 2019

Если вы хотите простую проверку электронной почты 

<input type="email" name="email" required>

Это проверка по умолчанию в браузере

Рабочий код 

<form>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>
0 голосов
/ 05 июля 2019

Просто Вы можете использовать для проверки электронной почты @, используя <input type="email" id="fname" name="fname" placeholder="enter email" required>

0 голосов
/ 05 июля 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";
         document.getElementById("email_error").style.display="inline-block";

         document.getElementById("fname").classList.add('error');

             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;
      }
      .error{
          border-bottom:2px solid red !important;
      }
 <!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" id="fname" name="fname" 
        placeholder="enter email" onblur="validateForm()"> 
        <span id="email_error" style="display:none">user did not enter an email</span>
       <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>
...