Gcobani Mkontwana

Gcobani Mkontwana

  • 565
  • 1.9k
  • 408k

Form is not validating when using jquery plugin library

May 24 2023 8:18 AM

Hi Team

I have form that validates the empty fields and yet i am using jquery plugin libraries to do this. When inspecting the element there are no errors. What am missing from the given code below? The form is not currently validating at all when user submit without a fields inserted.

<form id="placeOrder"  action="action.php" method="post">
          <input type="hidden" name="products" value="<?= $allItems; ?>">
          <input type="hidden" name="grand_total" value="<?= $grand_total; ?>">
          <div class="form-group">
            <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name" required>
          </div>
          <div class="form-group">
            <input type="email" id="email" name="email" class="form-control" placeholder="Enter E-Mail" required>
          </div>
          <div class="form-group">
            <input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter Phone" required>
          </div>
          <div class="form-group">
            <textarea id="address" name="address" class="form-control" rows="3" cols="10" placeholder="Enter Delivery Address Here..."></textarea>
          </div>
<pre><div class="form-group" id="pay-now">
                        <button type="submit" class="btn btn-primary" id="confirm-purchase">Confirm</button>
                    </div>
                </form>


// jquery code
-> using jquery libraries for validation here........ cdn library
$(document).ready(function() {
    $('#placeOrder').validate({
      rules: {
        name: {
          required: true,
          name: true
        },
        email: {
          required: true,
          email: true
        },
		phone:{
			required:true,
			phone:true
		},
		address: {
			required:true,
			address:true
		}
      },
      messages: {
        name: {
          required: 'Please enter your valid name',
          name: 'Please enter your valid name'
        },
        email: {
          required: 'Please enter your email address',
          email: 'Please enter your email address'
        },
		phone: {
			required:'Please enter valid phone number',
			phone:'Please enter valid phone number'
		},
		address:{
			required:'Enter your delivery address',
			address:'Enter your delivery address'
		}
      },
      errorElement: 'div',
      errorPlacement: function(error, element) {
        // Add the Bootstrap "alert" class to the error message
        error.addClass('alert alert-danger');
        // Add the error message after the input element
        error.insertAfter(element);
      },
      success: function(label) {
        // Remove the Bootstrap "alert-danger" class from the label
        label.removeClass('alert-danger');
        // Add the Bootstrap "alert-success" class to the label

      }

 


Answers (2)