Как проверить форму с помощью jQuery - PullRequest
Новая
       7

Как проверить форму с помощью jQuery

0 голосов
/ 11 ноября 2018

Я застрял, пытаясь проверить форму, используя juery, я хотел бы убедиться, что все поля заполнены, а также флажки / переключатели. Вот мой код (что-то вроде беспорядка, но я довольно новичок в кодировании и должен был выучить сам)

Любые ответы о том, как это исправить, будут очень благодарны, спасибо. 

<script>
//Creating the validation function	
$(document).ready(function() {
  $('form[id="checkout"]').validate({
	//Setting up the requirements for form  
    rules: {
	//Check if name is entered	
      firstname: 'required',
      lastname: 'required',
		
	//Check if genders is selected
	  genders: 'required',
		
	//Check if birthday is entered	
	  bday: 'required',	       
								
    messages: {
      firstname: 'Please enter your first name',
      lastname: 'Please enter your last name',
      genders: 'Please select your gender',
	  bday: 'Please enter your birthday',
	  checkbox: 'Please check at least one box'
    },
	
	//Check if at least one checkbox has been filled		
		
	//If everything meets the requirements, submit the form  
    submitHandler: function(form) {
      form.submit();
    }
  };
});
});
	
	
function checkboxFunction() {
    var checkBox = document.getElementById("checkbox");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
        text.style.display = "none";
    } else {
       text.style.display = "checkbox";
    }
}
		
</script>
body {
    font-family: 'Roboto', sans-serif;
	background-color: #E4DFDA;
}

h1 {
    letter-spacing: 3px;
    font-size: 30pt;
	background-color: #4062BB;
	height: 110px;
	padding-top: 45px;
	color: white;
	top: 0;
	text-align: center;
}

h2 {
    font-weight: 200;
}

h3 {
    font-weight: 100;
}

.container {
    width:100%;
    text-align: center;
    margin: auto;
}

.form-outline {
    width: 35%;
    margin: auto;
    text-align: left;
}

.bday {
	padding: 10px 25px;
	border-radius: 5px;
}

.url-form {
	padding: 10px 35px;
	text-align: left;
}

form {
    text-align: left;
}

.bottom-form {
	text-align: center;
	margin:auto;
}

.required:after {
	content:" *";
	color: red;
}

.button {
	padding: 10px 25px;
	color: white;
	background-color: #4062BB;
	font-size: 14pt;
	font-weight: 100;
	border-radius: 5px;
	border: 3px solid #4062BB;
}

.button:hover {
	color: #4062BB;
	background-color: transparent;
}

.required:after { content:" *"; }


.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}



#footer {
	margin-top: 100px;
	background-color: grey;
	padding-top: 45px;
	padding-bottom: 45px;
	color: white;
	bottom: 0;
	text-align: center;
	
}
<body>

<h1>Checkout</h1>
<br>
<div class="container">	
<h2>Almost done! All we need now is a little bit more about you.</h2>
<h3><em>Please fill all the fields marked with  <strong style="color:red;">*</strong>  before submitting.</em></h3>
<br>
<p>_____________________</p>
<br>
<div class="form-outline">	
	<!--Creating the form-->
    <form action="https://formspree.io/prometheus111222333@gmail.com" method="POST" name="CheckoutForm" onsubmit="FormValidate()" id="checkout">
		<h3 class="required">What is your name?</h3>
		<!--Enter name-->
        <input type="text" name="firstname" id="firstname" placeholder="First name" style="padding:10px; border-radius:3px;" for="firstname">
         
        <input type="text" name="lastname" id="lastname" placeholder="Last name" style="padding:10px; border-radius:3px;" for="lastname">
        <br><br>
		<!--Display client ID (can't be modified)-->
        <em>Client ID</em><br><br>
        <input type="text" name="id" value="#1322247" style="text-align:center; padding:10px; border-radius:3px;" disabled>
        <br><br>
		
		<!--Select gender-->
		<h3 class="required" id="genders" for="genders">What is your gender?</h3>
        <input type="radio" name="gender" id="male" value="male"> Male<br>
        <input type="radio" name="gender" id="female" value="female"> Female<br>
        <input type="radio" name="gender" id="other" value="other"> Other
		<br><br>
		
		<h3 class="required">When is your birthday?</h3>
		<!--Enter Birthday-->
        <input type="date" name="bday" id="bday" class="bday" for="bday">
		<br><br>
		
		<h3 class="required">Do you own any of the following items?</h3>
		<h4>(check none if you do not)</h4>
		<!--Checkbox-->
        <input type="checkbox" name="vehicule1" id="vehicule1" value="Bicycle"> Bicycle<br>
        <input type="checkbox" name="vehicule2" id="vehicule2" value="Car"> Car <br>
        <input type="checkbox" name="vehicule3" id="vehicule3" value="Motorcycle"> Motorcycle <br>
        <input type="checkbox" name="vehicule4" id="vehicule4" value="Tractor"> Tractor <br>
        <input type="checkbox" name="vehicule5" id="vehicule5" value="None"> None 
    	<br>
		

		<div class="bottom-form">
		<p>_____________________</p>
		<br>
		<h2>Now, what can we do for you?</h2>
    
		<h3>Enter your website's url to get promoted on ours!</h3>
		<!--Enter website url-->	
        <input type="url" name="websiteUrl" id="websiteUrl" class="url-form"> <br><br>
	

		<h3>All done? Click submit!</h3>
		<input class="button" type="button" onclick="function()" value="Submit" >
		</div>
		
		
    </form>	
</div>	
</div>	

<!--Adding the footer-->	
<h2 id="footer">Thank you for your trust & fidelity</h2>

</body>

1 Ответ

0 голосов
/ 11 ноября 2018

Вы должны использовать что-то вроде этого: 

$("#AddProductCategory").validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        excluded: ':disabled',
        rules: {
            Title: {
                minlength: 2,
                required: true,
                maxlength:100
            },
            EnglishTitle: {
                minlength: 2,
                required: true,
                maxlength: 100
            },
            IsProductLine: {
                required: true
            },
            IsVisible: {
                required: true
            },
            Image: {
                accept: "png|jpe?g|gif",
                filesize: 150000
            }
        },
        messages: {
            Image: {
                accept: "نوع فایل ورود باید .png .jpeg .png  باشد",
                filesize:"سایز عکس انتخابی حداکثر می تواند 150KB باشد"
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit
            ModalAlert("DivAlert", "فرم دارای خطا می باشد", "danger");
            $('.modal').animate({ scrollTop: 0 }, 'slow');
        },

        errorPlacement: function (error, element) { // render error placement for each input type
            if (element.parents('.mt-radio-list').size() > 0 || element.parents('.mt-checkbox-list').size() > 0) {
                if (element.parents('.mt-radio-list').size() > 0) {
                    error.appendTo(element.parents('.mt-radio-list')[0]);
                }
                if (element.parents('.mt-checkbox-list').size() > 0) {
                    error.appendTo(element.parents('.mt-checkbox-list')[0]);
                }
            } else if (element.parents('.mt-radio-inline').size() > 0 || element.parents('.mt-checkbox-inline').size() > 0) {
                if (element.parents('.mt-radio-inline').size() > 0) {
                    error.appendTo(element.parents('.mt-radio-inline')[0]);
                }
                if (element.parents('.mt-checkbox-inline').size() > 0) {
                    error.appendTo(element.parents('.mt-checkbox-inline')[0]);
                }
            } else if (element.parent(".input-group").size() > 0) {
                error.insertAfter(element.parent(".input-group"));
            } else if (element.attr("data-error-container")) {
                error.appendTo(element.attr("data-error-container"));
            } else {
                error.insertAfter(element); // for other inputs, just perform default behavior
            }
        },

        highlight: function (element) { // hightlight error inputs

            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change done by hightlight

            $(element)
                .closest('.form-group').removeClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label
                .closest('.form-group').removeClass('has-error'); // set success class to the control group

        },

        submitHandler: function (form) {

            CreateProductCategory();
            $('.modal').animate({ scrollTop: 0 }, 'slow');
        }
    });
...