HTML에서 양식 유효성 검사를 추가하는 방법은 무엇입니까?

var self = this;
$(document).ready(function() {
  
  
  // Right way, as suggested by @Sparky in the comments below, is to have attache validation code to the form only once.
  $("#myForm").validate({
    rules: {

      'name': { // this is value of the name attribute of your field
        required: true,
      },

      'email': {
        required: true,
        // regex: 'regex for email field goes here'
      }
    },
    messages: {
      'name': {
        required: "Name is required"
      },

      'email': {
        required: "Email is required",
        //regex: 'Error response for regex fail goes here'
      }
    }

  });
  $(".submit").click(function() {

    
    // Do a check each time before submit
    if (!$("#myForm").valid())
      alert("Form has validation errors. Cannot submit!!");
    else {
      alert("Form can be submitted!!");
      // do jQuery form submit here
    }
  });

});

.error {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>

<form method="post" id="myForm">
  <input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name">
  <input type="text" name="email" placeholder="Email:" data-required="true" data-type="Email">
  <input type="text" name="phone" placeholder="Phone Number:" data-required="true" data-type="Phone">
  <select>
    <option value="" disabled selected>College Name:</option>
    <option>College 1</option>
    <option>College 2</option>
    <option>College 3</option>
    <option>College 4</option>
    <option>College 5</option>
    <option>College 6</option>
  </select>
  <select>
    <option value="" disabled selected>Enquiry Type:</option>
    <option>MD/MS Coaching</option>
    <option>MDS Coaching</option>
    <option>DNB Coaching</option>
  </select>
  <textarea>Message</textarea>
  <button class="btn btn-info submit">Submit</button>
</form>