यदि सभी फ़ील्ड खाली हैं, तो कम से कम एक फ़ील्ड के लिए टेक्स्ट जोड़ने के लिए फ़ॉर्म के लिए एक jQuery सत्यापन कोड जोड़ा गया।

वह कोड मेरे लिए ठीक काम कर रहा है लेकिन मुद्दा यह है कि मैंने लाल रंग में त्रुटियों को प्रदर्शित करने के लिए एक कोड जोड़ा है लेकिन यह सभी क्षेत्रों के लिए काम नहीं कर रहा है।

यह केवल स्काइप और ईमेल आईडी के लिए काम कर रहा है। इसे लिंक्डइन और नाम के लिए भी काम करना चाहिए।

$(document).ready(function() {
  $('#myform').validate({
    rules: {
      skypeid: {
        require_from_group: [1, '.mygroup']
      },
      linkedin: {
        require_from_group: [1, '.mygroup']
      },
      uname: {
        require_from_group: [1, '.mygroup']
      },
      email: {
        require_from_group: [1, '.mygroup']
      }
    },
    groups: {
      mygroup: "skypeid linkedin uname email"
    },
  });
});
.mygroup.error {
  color: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<form action="#" method="post" id="myform" role="form" enctype="multipart/form-data">
  <br/>
  <h5 class="partnershipcontactus">Contact Us</h5>
  <hr>
  <div class="col-md-5">
    <label for="skypeid"><b>Skype Handle</b></label>
    <input type="text" placeholder="Enter Your Skype Id" name="skypeid" id="skypeid" class="mygroup">
  </div>
  <div class="col-md-2 selectingany"><span>OR</span></div>
  <div class="col-md-5">
    <label for="linkedin"><b>Linkedin Profile</b></label>
    <input type="text" placeholder="Enter Your Linkedin id" name="linkedin" id="linkedin" class="mygroup">
  </div>
  <div class="col-md-12 selectinganysec"><span>OR</span></div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="name"><b>Name</b><span class="mandatory"><font color="red">*</font></span></label>
      <input type="text" placeholder="Enter Your Name" name="uname" id="uname" class="mygroup">
    </div>
  </div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="email"><b>Email</b><span class="mandatory"><font color="red">*</font></span></label>
      <input type="text" placeholder="Enter Email" name="email" id="email" class="mygroup">
    </div>
  </div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="phonenumber"><b>Contact Number</b></label>
      <input type="text" placeholder="Enter Phone Number" name="phonenumber" id="phonenumber" class="mygroup">
    </div>
  </div>

  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="clearfix">
      <button id="submit" name="submit_contact" type="submit" class="signupbtn">Submit</button>
    </div>
  </div>
  <div class="col-md-2"></div>
  </div>
</form>

Jsfiddle लिंक: https://jsfiddle.net/jdqox5y0/

1
tester 27 फरवरी 2019, 15:21

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप प्रत्येक इनपुट के बाद एक त्रुटि संदेश दिखाना चाहते हैं तो बस अपना समूह विकल्प हटा दें:

$(document).ready(function() {
  $('#myform').validate({
    rules: {
      skypeid: {
        require_from_group: [1, '.mygroup']
      },
      linkedin: {
        require_from_group: [1, '.mygroup']
      },
      uname: {
        require_from_group: [1, '.mygroup']
      },
      email: {
        require_from_group: [1, '.mygroup']
      }
    },
  });
});
.mygroup.error::placeholder {
  color: red !important;  
}
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form action="#" method="post" id="myform" role="form" enctype="multipart/form-data">
  <br/>
  <h5 class="partnershipcontactus">Contact Us</h5>
  <hr>
  <div class="col-md-5">
    <label for="skypeid"><b>Skype Handle</b></label>
    <input type="text" placeholder="Enter Your Skype Id" name="skypeid" id="skypeid" class="mygroup">
  </div>
  <div class="col-md-2 selectingany"><span>OR</span></div>
  <div class="col-md-5">
    <label for="linkedin"><b>Linkedin Profile</b></label>
    <input type="text" placeholder="Enter Your Linkedin id" name="linkedin" id="linkedin" class="mygroup">
  </div>
  <div class="col-md-12 selectinganysec"><span>OR</span></div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="name"><b>Name</b><span class="mandatory"><font color="red">*</font></span></label>
      <input type="text" placeholder="Enter Your Name" name="uname" id="uname" class="mygroup">
    </div>
  </div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="email"><b>Email</b><span class="mandatory"><font color="red">*</font></span></label>
      <input type="text" placeholder="Enter Email" name="email" id="email" class="mygroup">
    </div>
  </div>
  <div class="col-md-12">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <label for="phonenumber"><b>Contact Number</b></label>
      <input type="text" placeholder="Enter Phone Number" name="phonenumber" id="phonenumber" class="mygroup">
    </div>
  </div>

  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="clearfix">
      <button id="submit" name="submit_contact" type="submit" class="signupbtn">Submit</button>
    </div>
  </div>
  <div class="col-md-2"></div>
  </div>
</form>
1
Pete 27 फरवरी 2019, 12:55