Новое в HTML и JQuery. Возникли проблемы с отображением сообщений об ошибках - PullRequest
Новая
       3

Новое в HTML и JQuery. Возникли проблемы с отображением сообщений об ошибках

0 голосов
/ 20 октября 2019

Мне нужна помощь с моей проверкой JQUERY.

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

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#info4all").validate({
                    rules: {
                        Name : {
                            required: true,
                            minlength: 3
                        },
                        PhoneNumber: {
                            required: true,
                            number: true,
                            minlength: 9
                        },
                        Email: {
                            required: true,
                            email: true
                        },
                        messages : {
                            Name: { 
                                minlength: "Name should be at least 3 characters"
                            },
                            PhoneNumber: {
                                required: "Please enter your age",
                                number: "Please enter your age as a numerical value",
                                minlength: "needs to be more numbers" 
                            },
                            email: {
                                email: "The email should be in the format: abc@domain.tld"
                            }
                        }
              });
          })
      </script>
      <title>Contact US</title> 
      <link rel="stylesheet" type="text/css" href ="stylerules.css">
      <meta charset=ntf-8">
    </head>
    <body>
      <nav>
        <center><table class= "menu">
<tr>
<td><button><a href= "home.html">Home</a></button></td>
<td><button><a href= "aboutus.html">AboutUs</a></button></td>
<td><button><a href= "ContactUs.html">ContactUs</a></button></td>
<td><button><a href= "FAQS.html">FAQ</a></button></td>
<td><button><a href= "index.html">Homepage</a></button></td>
</tr>
</center></table>
</nav>


<div id="container" class="centertext">

<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>


<nav>
</nav>

<div id ="left">
.
</div>

<div id="main">

<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>

.
</div>
</body>
<footer>

<p><center><a href="home.html">Home</a></p>
<a href="aboutus.html">Learn More About Us</a>
<a href="Faqs.html">Faqs</a>
<a href="contactus.html">More Information</a>
<a href="index.html">Welcome Page</a>
</a></center></p>

<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>

<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>

<form id="info4all"First name & Last Name:<br>

<input type="text" name="Name"><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber">
<br> Email address:<br>
<input type="Email" name="Email">
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>

<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>

<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>


<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>

</form>


<br></table>
</footer>

<html>

Ответы [ 3 ]

0 голосов
/ 20 октября 2019

это поможет мне, ваша форма искажена, и вы пропустили скобку в скрипте 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
    $("#info4all").validate({
        rules: {
            Name : {
                required: true,
                minlength: 3
            },
            PhoneNumber: {
                required: true,
                number: true,
                minlength: 9
            },
            Email: {
                required: true,
                email: true
            }
        },
        messages : {
            Name: "Name should be at least 3 characters",
            PhoneNumber: {
                required: "Please enter your age",
                number: "Please enter your age as a numerical value",
                minlength: "needs to be more numbers"
            },
            Email: {
                email: "The email should be in the format: abc@domain.tld"
            }
        }          
    })
})


</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset="utf-8">
<meta name="keywords" content ="Contact Us, Staff">
<meta name="descrtiption" content="Looking to talk to us personally. Contact us Here.."'>
<meta name="author" content="Michael Cortez">
</head>


<body>

<nav>
<center><table class= "menu">
<tr>
<td><button><a href= "home.html">Home</a></button></td>
<td><button><a href= "aboutus.html">AboutUs</a></button></td>
<td><button><a href= "ContactUs.html">ContactUs</a></button></td>
<td><button><a href= "FAQS.html">FAQ</a></button></td>
<td><button><a href= "index.html">Homepage</a></button></td>
</tr>
</center></table>
</nav>


<div id="container" class="centertext">

<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>


<nav>
</nav>

<div id ="left">
.
</div>

<div id="main">

<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>

.
</div>
</body>
<footer>

<p><center><a href="home.html">Home</a></p>
<a href="aboutus.html">Learn More About Us</a>
<a href="Faqs.html">Faqs</a>
<a href="contactus.html">More Information</a>
<a href="index.html">Welcome Page</a>
</a></center></p>

<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>

<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>

<form id="info4all" name="info4all">
    First name & Last Name:<br>
    <input type="text" name="Name" required /><br>
    Phone Number:<br>
    <input type="tel" name="PhoneNumber" required />
    <br> Email address:<br>
    <input type="email" name="Email" required />
    <br> Date:<br>
    <br><input type="Date" name="Date"></br>
    <br>When should we contact you?</br>
    <input type="radio" name="Selection" value="Dates" checked> Morning<br>
    <input type="radio" name="Selection" value="Dates"> Afternoon<br>
    <input type="radio" name="Selection" value="Dates"> Weekend</br>

    <br>What can we help you with?
    <br />
    <input type="checkbox" name="Information" value="Information" />Information
    <br />
    <input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
    <br />
    <input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
    <br />
    <input type="checkbox" name="Other" value="Other" />Other..
    </br>

    <br>Choose how you wish us to contact you</br><select>
    <option value="Telephome">Landline</option>
    <option value="Email">Email</option>
    <option value="Call">Cell</option>
    <option value="In Person">In Person</option>
    </select>
    </br>


    <br><button type="submit" value="Submit">Submit</button>
    <button type="reset" value="Reset">Reset</button></br>

</form>


<br></table>
</footer>


<html>
0 голосов
/ 20 октября 2019

Попробуйте этот код. Я исправил несколько ошибок в тегах HTML и исправил скобки JQuery. Также добавлен класс ошибок для отображения красного цвета на каждом сообщении об ошибке в функции проверки. 

 $("#info4all").validate({
      rules: {
        Name : {
          required: true,
          minlength: 3
        },
        PhoneNumber: {
          required: true,
          number: true,
          minlength: 9
        },
        Email: {
          required: true,
          email: true
        }
        },
        messages : {
          Name: { 
            minlength: "Name should be at least 3 characters"
          },
          PhoneNumber: {
            required: "Please enter your age",
            number: "Please enter your age as a numerical value",
            minlength: "needs to be more numbers" 
          },
          email: {
            email: "The email should be in the format: abc@domain.tld"
          }   

        },
         errorClass: 'invalidField',
    errorPlacement: function(error, element) {
        error.css('color', 'red');
        if(element.is(":radio"))
        {
            error.appendTo(element.parents('.container'));
        }else{
        error.insertAfter(element);
        }
    },
    errorElement: "span",
    submitHandler: function(form) {

    }
      });
    });

Найдите полный фиксированный код по ссылке ниже. https://jsfiddle.net/RamshaS/2w85Lxnz/1/

Кстати, теперь форма работает отлично!

Не забудьте добавить этот и этот плагин проверки jquery в концеhtml page.

Надеюсь, этот ответ поможет вам

0 голосов
/ 20 октября 2019

Пожалуйста, проверьте ваши скобки javascript. Похоже, ты что-то пропустил. Должно быть так - 

$("#info4all").validate({
  rules: {
    Name: {
      required: true,
      minlength: 3
    },
    PhoneNumber: {
      required: true,
      number: true,
      minlength: 9
    },
    Email: {
      required: true,
      email: true
    },
    messages: {
      Name: {
        minlength: "Name should be at least 3 characters"
      },
      PhoneNumber: {
        required: "Please enter your age",
        number: "Please enter your age as a numerical value",
        minlength: "needs to be more numbers"
      },
      email: {
        email: "The email should be in the format: abc@domain.tld"
      }
    }
  }
});

Видите пару дополнительных скобок перед завершением скрипта? Проверьте также JSFiddle https://jsfiddle.net/ashhaq12345/rbnztvx0/7/

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

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

...