JQuery форма валидатор не работает с HTML - PullRequest
0 голосов
/ 16 октября 2018

Проверка формы jquery не работает.

Пробовал так много способов, но он не работает и даже не показывает никаких ошибок.

Извините за публикацию такого большого количества кода.

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

Вот мой HTML-код,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Register Yourself</title>
  </head>
  <body>
    <h1>NIT Uttarakhand</h1>
    <h2>Alumni</h2>
    <h3>Register Yourself</h3>

    <form id="register">
      <div>
        <input type="text" name="fname" placeholder="First Name" ><br><br>
      </div>
      <div>
        <input type="text" name="mname" placeholder="Middle Name" ><br><br>
      </div>
      <div>
        <input type="text" name="lname" placeholder="Last Name"><br><br>
      </div>
      <div>
        <select name="degree" >
          <option value="BT">B.Tech </option>
          <option value="MT">M.Tech </option>
          <option value="PH">PhD </option>
        </select>
      </div>
      <div>
        <select name="branch">
          <option value="civ">Civil Engineering </option>
          <option value="cse">Computer Science & Engineering </option>
          <option value="ece">Electronics and Communication Engineering </option>
          <option value="eee">Electrical and Electronics Engineering </option>
          <option value="mec">Mechanical Engineering </option>
        </select>
      </div>
      <div>
        <select name="pass_year" >
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
        </select>
      </div>
      <div>
        <input type="text" name="roll_no" placeholder="Roll Number e.g., BT16CSE023" ><br>
      </div>
      <div>
        <input type="text" name="phone" placeholder="Phone Number" >
      </div>
      <div>
        <input type="text" name="email" placeholder="Mail ID" >
      </div>
      <div>
        <input type="text" name="present_address" placeholder="Present Address" ><br><br>
      </div>
      <div>
        <input type="text" name="permanent_address" placeholder="Permanent Address" ><br><br>
      </div>
      <div>
        <input type="text" name="facebook" placeholder="Facebook Profile"><br><br>
      </div>
      <div>
        <input type="text" name="linkedin" placeholder="Linked In Profile"><br><br>
      </div>
      <div>
        <input type="text" name="twitter" placeholder="Twitter Profile"><br><br>
      </div>
      <div>
        <input type="text" name="github" placeholder="Github Profile"><br><br>
      </div>
      <div>
        <input type="text" name="username" placeholder="Username (min 8 characters)" ><br>
      </div>
      <div>
        <input type="text" name="password" placeholder="Password" >
      </div>
      <div>
        <input type="text" name="password1"  placeholder="Confirm password" >
      </div>
      <div>
        <input class="btn-btn-primary" id="submit-button" type="submit" value="Submit Details">
      </div>
    </form>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.3.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
    <script src="plugins/register.js"></script>
  </body>
</html>

А вот мой код jquery:

$().ready(function(){
  // Jquery form validator
  $("#register").validate({
    rules:
    {
      fname:{ required:true},
      degree:{ required: true},
      branch:{ required: true},
      pass_year:{ required: true},
      roll_no:{ required: true, minlength: 10, maxlength: 10 },
      phone:{ required: true, minlength: 10, maxlength: 10 },
      email:{ required: true, email: true },
      present_address:{required:true},
      permanent_address:{required:true},
      facebook:{ url: true},
      linkedin:{ url: true},
      twitter:{ url: true},
      github:{ url: true},
      username:{ required: true, minlength: 8},
      password:{ required: true, minlength: 8 },
      password1:{ required: true, equalTo: "#pass1" }
    },
    messages:
    {
      fname:{required:"Please Enter Your First Name" },
      degree:{ required: "Please select an option"},
      branch:{ required: "Please select an option"},
      pass_year:{ required: "Please select an option"},
      roll_no:{ required: "Please enter your College Roll Number", minlength: "Roll number should be length 10", maxlength: "Roll number should be of length 10" },
      phone:{ required: "Please provide your phone number", minlength: "Phone number should be of length 10", maxlength: "Phone number should be of length 10" },
      email:{ required: "Please provide your mail address", email: "Incorrect Email Address" },
      present_address:{required:"Please provide your present address"},
      permanent_address:{required:"Please provide your permanent address"},
      facebook:{url:"Incorrect URL" },
      linkedin:{url:"Incorrect URL" },
      twitter:{url:"Incorrect URL" },
      github:{url:"Incorrect URL" },
      username:{ required:"Please provide a username", minlength:"Minimum length is 8"},
      password:{ required: "Please Enter password", minlength: "Minimum length is 8" },
      password1:{ required: "Please enter the password again", equalTo: "Password doesn't matches" }
    }
  });


});

1 Ответ

0 голосов
/ 17 октября 2018

Скопируйте и вставьте как есть.Надеюсь, это поможет вам.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Register Yourself</title>
</head>

<body>
    <h1>NIT Uttarakhand</h1>
    <h2>Alumni</h2>
    <h3>Register Yourself</h3>

    <form id="register">
        <div>

            <input type="text" name="fname" placeholder="First Name"><br><br>
        </div>
        <div>
            <input type="text" name="mname" placeholder="Middle Name"><br><br>
        </div>
        <div>
            <input type="text" name="lname" placeholder="Last Name"><br><br>
        </div>
        <div>
            <select name="degree">
          <option value="BT">B.Tech </option>
          <option value="MT">M.Tech </option>
          <option value="PH">PhD </option>
        </select>
        </div>
        <div>
            <select name="branch">
          <option value="civ">Civil Engineering </option>
          <option value="cse">Computer Science & Engineering </option>
          <option value="ece">Electronics and Communication Engineering </option>
          <option value="eee">Electrical and Electronics Engineering </option>
          <option value="mec">Mechanical Engineering </option>
        </select>
        </div>
        <div>
            <select name="pass_year">
          <option value="2015">2015</option>
          <option value="2016">2016</option>
          <option value="2017">2017</option>
          <option value="2018">2018</option>
        </select>
        </div>
        <div>
            <input type="text" name="roll_no" placeholder="Roll Number e.g., BT16CSE023"><br>
        </div>
        <div>
            <input type="text" name="phone" placeholder="Phone Number">
        </div>
        <div>
            <input type="text" name="email" placeholder="Mail ID">
        </div>
        <div>
            <input type="text" name="present_address" placeholder="Present Address"><br><br>
        </div>
        <div>
            <input type="text" name="permanent_address" placeholder="Permanent Address"><br><br>
        </div>
        <div>
            <input type="text" name="facebook" placeholder="Facebook Profile"><br><br>
        </div>
        <div>
            <input type="text" name="linkedin" placeholder="Linked In Profile"><br><br>
        </div>
        <div>
            <input type="text" name="twitter" placeholder="Twitter Profile"><br><br>
        </div>
        <div>
            <input type="text" name="github" placeholder="Github Profile"><br><br>
        </div>
        <div>
            <input type="text" name="username" placeholder="Username (min 8 characters)"><br>
        </div>
        <div>
            <input type="text" id="pass1" name="password" placeholder="Password">
        </div>
        <div>
            <input type="text" name="password1" placeholder="Confirm password">
        </div>
        <div>
            <input class="btn-btn-primary" id="submit-button" type="submit" value="Submit Details">
        </div>
    </form>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</body>

</html>






$(document).ready(function() {
    // Jquery form validator
    $("#register").validate({
        rules: {
            fname: {
                required: true
            },
            degree: {
                required: true
            },
            branch: {
                required: true
            },
            pass_year: {
                required: true
            },
            roll_no: {
                required: true,
                minlength: 10,
                maxlength: 10
            },
            phone: {
                required: true,
                minlength: 10,
                maxlength: 10
            },
            email: {
                required: true,
                email: true
            },
            present_address: {
                required: true
            },
            permanent_address: {
                required: true
            },
            facebook: {
                url: true
            },
            linkedin: {
                url: true
            },
            twitter: {
                url: true
            },
            github: {
                url: true
            },
            username: {
                required: true,
                minlength: 8
            },
            password: {
                required: true,
                minlength: 8
            },
            password1: {
                required: true,
                equalTo: "#pass1"
            }
        },
        messages: {
            fname: {
                required: "Please Enter Your First Name"
            },
            degree: {
                required: "Please select an option"
            },
            branch: {
                required: "Please select an option"
            },
            pass_year: {
                required: "Please select an option"
            },
            roll_no: {
                required: "Please enter your College Roll Number",
                minlength: "Roll number should be length 10",
                maxlength: "Roll number should be of length 10"
            },
            phone: {
                required: "Please provide your phone number",
                minlength: "Phone number should be of length 10",
                maxlength: "Phone number should be of length 10"
            },
            email: {
                required: "Please provide your mail address",
                email: "Incorrect Email Address"
            },
            present_address: {
                required: "Please provide your present address"
            },
            permanent_address: {
                required: "Please provide your permanent address"
            },
            facebook: {
                url: "Incorrect URL"
            },
            linkedin: {
                url: "Incorrect URL"
            },
            twitter: {
                url: "Incorrect URL"
            },
            github: {
                url: "Incorrect URL"
            },
            username: {
                required: "Please provide a username",
                minlength: "Minimum length is 8"
            },
            password: {
                required: "Please Enter password",
                minlength: "Minimum length is 8"
            },
            password1: {
                required: "Please enter the password again",
                equalTo: "Password doesn't matches"
            }
        }
    });


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