JQuery Validation - Remote method always check and become true before submit the form

0 votes

Using jQuery validation plugin, I have been trying to validate and submit my form. JS code for this as shown below.

jQuery.validator.addMethod(
  "regex",
  function(value, element, regexp) {
    var re = new RegExp(regexp);
    return this.optional(element) || re.test(value);
  },
  "Enter a valid phone number."
);

var phoneNumbers_default = {
  maxlength: 11,
  regex: /^0+\d{2}[ -]\d{7}( x\d{1,6})?$/,
  remote: "./includes/check-duplicate-mobile.php" 
  // remote: {
  //   url: "./includes/check-duplicate-mobile.inc.php",
  //   type: "post"
  // }
};

var phoneNumbers_required = {
  required: true
};

var phoneNumber_message = {
  minlength: "Your mobile number should be at least 11 digits long.",
  maxlength: "Your mobile number cannot be longer than 11 digits.",
  remote: "One active user account already exists for this mobile number. Duplicates are not allowed."
} 

jQuery.extend(phoneNumbers_default,phoneNumbers_required); 

function processForms(el,fileAttached=false) {
  var $el = $('#'+el)
  $el.validate({
    errorElement: 'span',
    focusInvalid: false,
    //ignore:  ".ignore",
    ignore:  "",
    rules: {
      email: {
        required: true,
        email: true
      },    
      mobileNumber: phoneNumbers_default,
      p_mobile: phoneNumbers_default,
    },

    messages: {
      email: {
        required: "Please provide a valid email.",
        email: "Please provide a valid email."
      },
      mobileNumber:phoneNumber_message,
      p_mobile:phoneNumber_message,
    },

    submitHandler: function (form) {
      
      var $form = $(form);
      var url = 'add_user_form.php'; 
      var formData = new FormData(form);

      $.ajax({        
        url: url,
        type: "POST",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(json) {
          json = jQuery.parseJSON(json)          
          if (json.success) {
            // it worked
          } else {
            // it not worked
          }
        }, 
      });
      return false; 
    }
  })
}

Above code works fine for the first submit. I meant it is new form submission. But my problem is when I try to update the existing data using the same form it always checks remote method and become return ture. That means, if I want to update the existing data, I always have to change the mobile number.

UPDATE: Form markup

<form class="mt-2 text-dark-m1" id="addNew_user" method="post" action="" >
      
  <div class="form-group row">
    <div class="col-sm-3 col-form-label text-sm-right pr-0">
      Email:
    </div>
    <div class="col-sm-9">
      <input type="text" name="principal_email" class="form-control col-sm-4" value="<?=$p_email?>" />
    </div>
  </div>


  <div class="form-group required row">
    <div class="col-sm-3 col-form-label text-sm-right pr-0">
      Mobile :
    </div>
    <div class="col-sm-9">
      <input type="text" name="p_mobile" class="form-control col-sm-4" value="<?=$p_mobile?>" required />
    </div>
  </div>

  <div class="border-t-1 bgc-secondary-l4 brc-secondary-l2 py-35 mx-n25 mt-5">
    <div class="offset-md-3 col-md-9 text-nowrap flex-align-center">
      <button class="btn btn-info btn-bold px-4" type="submit"><i class="fa fa-check mr-1"></i>Submit</button>
    </div>
  </div>
</form>

Serverside Code:

$mobileNumber =  isset($_GET['p_mobile']) ?  $_GET['p_mobile'] : ''; 

if (strlen($mobileNumber) >= 10 && strlen($mobileNumber) <= 12) {
  
  $sql ="SELECT user_id FROM user WHERE mobile = ?";
  $stmt = $pdo->prepare($sql);
  $stmt->execute([$mobileNumber]);    
  $uid  = $stmt->fetchColumn();

  if ($uid) echo "false"; // it comes to this line
  else echo "true";

} else {
  echo "false";
}

Can anybody tell me, how I fix this issue?

Aug 24, 2022 in Web Development by gaurav
• 23,260 points
2,255 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

Getting the Text of a Check Box and Text Area To Display using jQuery

What I am trying to do is ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,512 views
0 votes
1 answer

What is the difference between JavaScript and jQuery?

JavaScript is an independent language and can ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
434 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30, 2022 in Web Development by rajatha
• 7,640 points
4,027 views
0 votes
0 answers

jQuery: serialize() form and other parameters

Is it possible to send form elements (serialized with .serialize() method) ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
1,482 views
0 votes
0 answers

jquery uncheck and check and vise versa checkbox of child element

Here is my html #This will be generated ...READ MORE

Jul 26, 2022 in Web Development by gaurav
• 23,260 points
890 views
0 votes
1 answer
0 votes
0 answers

Jquery validation plugin - TypeError: $(...).validate is not a function

I am getting an error in my ...READ MORE

May 7, 2022 in Java-Script by narikkadan
• 63,420 points
1,120 views
0 votes
1 answer

Jquery validation plugin - TypeError: $(...).validate is not a function

The "$(...). validate is not a function" ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,640 points
14,416 views
0 votes
0 answers

jQuery Validate plugin not validating an element that's not a form input

I need to validate with jQuery Validation ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,562 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP