Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi team

i am using jquery plugin to validate the form and cdn libraries are used to do this, but the problem now the form is not validating and yet while debug there are no bugs. what could be the reason for this?

What I have tried:

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

JavaScript
<pre> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

JavaScript
$(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

      }

    });
  });
Posted
Updated 23-May-23 23:11pm
v2
Comments
Member 15627495 24-May-23 2:51am    
by using the event ".ready()", the validation happens after your page loading...
it's not the good event, one validate button can fire the 'validate' action.
Richard Deeming 24-May-23 4:38am    
"... the form is not validating ..."
"... there are no bugs ... "

So the fact that the form isn't validating is the behaviour you expect?

Or did you mean there are no other bugs?

1 solution

Two things I picked up on =

1. The validation rules you defined in the jQuery are incorrect. There is no "name" or "phone" validation methods in the jQuery Validation plugin.

2.The success function in the jQuery code is incomplete. You need to add the class 'alert alert-success' to the label in the success function as well.

Tested and validating with below code - Validate Fields JQuery[^]

New code with added success and removal of fields name and phone -
<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <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..." required></textarea>
    </div>
    <div class="form-group" id="pay-now">
      <button type="submit" class="btn btn-primary" id="confirm-purchase">Confirm</button>
    </div>
  </form>

  <script>
    $(document).ready(function() {
      $('#placeOrder').validate({
        rules: {
          name: {
            required: true
          },
          email: {
            required: true,
            email: true
          },
          phone: {
            required: true
          },
          address: {
            required: true
          }
        },
        messages: {
          name: {
            required: 'Please enter your valid name'
          },
          email: {
            required: 'Please enter your email address',
            email: 'Please enter a valid email address'
          },
          phone: {
            required: 'Please enter a valid phone number'
          },
          address: {
            required: 'Please enter your delivery address'
          }
        },
        errorElement: 'div',
        errorPlacement: function(error, element) {
          error.addClass('alert alert-danger');
          error.insertAfter(element);
        },
        success: function(label) {
          label.removeClass('alert-danger');
          label.addClass('alert alert-success');
        }
      });
    });
  </script>
</body>
</html>
 
Share this answer
 
Comments
Gcobani Mkontwana 24-May-23 5:59am    
@Andre Oosthuizen thanks man i saw the demo, will make changes to the code and amend accordingly now i saw what i missed from the given code.
Andre Oosthuizen 24-May-23 6:27am    
Pleasure

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900