javascript - 私が持っているものではなく、jqueryでフォームを検証する簡単な方法はありますか??

Question

jqueryを使用してフォーム検証を作成しようとしています。まず、コードが機能しません。次に、jquery を使用して正規表現パターンを使用してフォームを検証する簡単な方法があることを願っています。jquery を正しく使用しているかどうかわからないので、プラグインの使用を避けたいと考えています。

    $(document).ready(function() {

        var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        var pattern1 = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/; 
        var pattern2 = /[a-zA-Z]*( [a-zA-Z]*)?/;

   $('#submit').on('click', function() {
      var valid = true,
      errorMessage = "",


if ($('#role').val() == '') {
    errorMessage  = "please choose a role \n";
    valid = false;
}enter code here

if ($('#state').val() == '') {
    errorMessage  = "please choose a state \n";
    valid = false;
}

if ($('#major').val() == '') {
    errorMessage  = "please provide a major \n";
    valid = false;
}

if ($('#degree').val() == '') {
    errorMessage  = "please provide a degree \n";
    valid = false;
}

if ($('#location').val() == '') {
    errorMessage  = "please choose a location \n";
    valid = false;
}

if ($('#gradyear').val() == '') {
    errorMessage  = "please provide a graduation year \n";
    valid = false;
}

if ($('#dept').val() == '') {
    errorMessage  = "please provide your department \n";
    valid = false;
}

if ($('#campadd').val() == '') {
    errorMessage += "please enter your address\n";
     valid = false;
} 

if($('#email').val() !== ""){
        if(!pattern.test('#email'.val())){
            errorMessage += "email invalid!\n";                
            valid  = false;
        }
if($('#telephone').val() !== ""){
        if(!pattern1.test('#telephone'.val())){
            errorMessage += "telephone number invalid!\n";                
            valid  = false;
        }
    }}

if( !valid && errorMessage.length > 0){
    alert(errorMessage);
}