logo
down
shadow

I cannot display a specific form field to the user after validation fails using jquery


I cannot display a specific form field to the user after validation fails using jquery

By : Nicolas Kerdelhué
Date : November 18 2020, 03:01 PM
seems to work fine I need some help. The alert message that pops-up when a user submits the form below and validation fails does not display first name required. It only displays last name required but when i fill out the last name and submit then it displays first name required. What do i need to do to make them both appear on the alert. Code is below , You need to change this:
code :
$errorMSG = "<li>Last Name is required</<li>";
$errorMSG .= "<li>Last Name is required</<li>";


Share : facebook icon twitter icon
JQuery Validation Plugin: Ensure Form Field is not a specific Value

JQuery Validation Plugin: Ensure Form Field is not a specific Value


By : learning
Date : March 29 2020, 07:55 AM
Hope this helps you could use range in this case
code :
range: [1, 2]
jquery still need to hide form field if backend validation fails

jquery still need to hide form field if backend validation fails


By : DKS
Date : March 29 2020, 07:55 AM
it should still fix some issue This works fine for me. Keep in mind that you need to set the option as selected (default) in order for the field to be set correctly when document ready fires.
Example: http://jsbin.com/nopenohomo/edit?html,js,console,output
code :
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
    let dropdown_value = $('#dropdown').val();

    if (dropdown_value === 'true') {
      $('.time').show();
    } else {
      $('.time').hide();
    }

    $('#dropdown').on('change',  function (e){
      var timeAtAddress = $(this).val()
      console.log(timeAtAddress)
      if (timeAtAddress === 'true' ){
        $('.time').show()
      }
      if (timeAtAddress === 'false'){
        $('.time').hide()
      }
    });
  });
  </script>
  </head>
<body>
 <select id="dropdown">
  <option value="true">True</option>
  <option value="false" selected="false">False</option>
</select> 
  <div class="time">
    Test
  </div>
</body>
</html>
jQuery form validation fails only on a specific input

jQuery form validation fails only on a specific input


By : Dennis Zhu
Date : March 29 2020, 07:55 AM
will help you Your validation logic is a little messed up. This is what's happening:
#driver_first_name is validated as invalid... result is set false #driver_last_name is validated as valid... result is set true #driver_address_street is validated as valid... result is set true
code :
function validateForm(form, fields) { //add exit anbimation and reset the container state
  $(".form-input-error").remove();
  var result = true;
  $.each(fields.rules, function(key, value) {
    if (!$("#" + key + "").val()) {
      $("#" + key + "").addClass("form-error");
      $("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
      result = false;
      //console.log(this.val());
    } else {
      $("#" + key + "").removeClass("form-error");
    }
  });
  return result;
}

$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
  var checkInputs = {
    rules: {
      driver_first_name: {
        message: "First Name is Required"
      },
      driver_last_name: {
        message: "Last Name is Required"
      },
      driver_address_street: {
        message: "street is Required"
      }
    }
  };
  if (validateForm($("#addDriverForm"), checkInputs) == true) {
    console.log("form submit");
  } else {
    e.preventDefault();
    console.log("form errors");
  }   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">

  <form id="addDriverForm" class="post-form" action="" method="post">

    <div class="form-row">
      <label for="driver_first_name">First Name:</label>
      <input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
    </div>

    <div class="form-row">
      <label for="driver_last_name">Last Name:</label>
      <input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
    </div>

    <div class="form-row">
      <label for="driver_address_street">Street</label>
      <input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
    </div>

    <div class="form-row">
      <label for="driver_address_city">City</label>
      <input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
    </div>

    <div class="form-row">
      <label for="driver_address_state">State</label>
      <input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
    </div>


    <div class="form-row">
      <label for="driver_address_zip">Zip</label>
      <input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
    </div>

    <div class="form-row">
      <label for="driver_telephone">Zip</label>
      <input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
    </div>

    <div class="form-row">
      <label for="driver_email">E-Mail</label>
      <input id="driver_email" placeholder="60164" type="email" name="driver_email">
    </div>


    <div class="form-row"><label for="driver_payment_type">Settlement Type</label>
      <select id="driver_payment_type" name="driver_payment_type">
      <option value="flat">Flat Rate</option>
      <option value="percent">Percent</option>
      <option value="mile">Per Mile</option>
    </select></div>


    <div class="form-row">
      <label for="driver_license_number">Lisence #</label>
      <input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
    </div>

    <div class="form-row">
      <label for="driver_license_expiration">Lisence Expiration Date</label>
      <input id="driver_license_expiration" type="date" name="driver_license_expiration">
    </div>

    <div class="form-row">
      <label for="driver_licence_image">Lisence Copy</label>
      <input id="driver_licence_image" type="file" name="driver_licence_image">
    </div>

    <div class="form-row">
      <label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
      <input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
    </div>

    <div class="form-row">
      <label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
      <input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
    </div>

    <div class="form-row">
      <label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
      <input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
    </div>
    <div class="form-row"></div>
    <div class="driver-access-copnditional">
      <div class="form-row">
        <label for="driver_username">Username</label>
        <input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
      </div>


      <div class="form-row">
        <label for="driver_password">Password</label>
        <input id="driver_password" placeholder="***" type="password" name="driver_password">
      </div>
    </div>

    <div class="clear"></div>
    <input type="submit" class="submitNewDriver button green" value="Submit" />
  </form>
</div>
Jquery Form Validation: Display all errors in a specific section of the webpage

Jquery Form Validation: Display all errors in a specific section of the webpage


By : Enrique Martinez
Date : March 29 2020, 07:55 AM
hope this fix your issue According to the options you can provide for this plugin (see http://docs.jquery.com/Plugins/Validation/validate#options), you can specify the errorLabelContainer and errorContainer options, where it will group the error messages into a single or multiple containers.
Sample taken from site:
PHP - Display error message inside text field if form fails validation

PHP - Display error message inside text field if form fails validation


By : Metin Barlik
Date : March 29 2020, 07:55 AM
Does that help You have to use javascript in order to validate the inputs of the form.
If you want to use PHP validation, then an AJAX request should be made.
Related Posts Related Posts :
  • How to add new Custom Title in Woocommerce My Account sidebar?
  • Mattermost, slash command response as message attachment
  • Library failure when installing Libsodium (Amazon EC2)
  • Page footer centering using MPDF
  • HTML : Different link at each click
  • TCPDF how to prevent page break within a block (split content)?
  • How to insert values in table
  • Php query builder for OR and AND condition
  • ZF2 Ajax call returns all information instead of just the id being sent
  • Order custom post types in WordPress by the meta_value of another plugin
  • saving bank row using array
  • Convert URL with query parameters to guzzle
  • Get POST values by index in codeigniter
  • Composer is not functioning?
  • Retrieving an Array with Axios in Laravel
  • How to get the last child of each cd element?
  • How to allow users to connect their own domain
  • PHP multidimensionnal array and empty value
  • PHP if statement doesn't work properly (paradoxical)
  • BadMethodCallException Call to undefined method Illuminate\Database\Query\Builder::searchable()
  • PHP explode() returns array inside an array
  • Echo parse error for creating new php file
  • PHP Parse error: syntax error, unexpected '?'
  • PHP Session not working correctly on a particular host
  • laravel how to get the extremities tables through the pivot
  • Show duplicate value in array only one but show all others
  • SMTP Emails not send (There is something wrong with server config as code is fine for other servers)
  • I can't turn off debug bar in Laravel on production
  • PHP creating multidimensional json
  • Increment value with get
  • Laravel 5.5: Convert query builder to eloquent
  • Reverse proxy onto a WordPress page?
  • Jumble Solver url rewrite
  • Using .htaccess to Execute php if directory of the same name not found
  • mysql - Unknown Column In Where Clause
  • Receive Emails into my Admin panel with php or other
  • PHP - adding only distinct value to an array in foreach loop not working
  • How to pass date picker from one page to another
  • Try catch always return error when I insert 2 data
  • Php redirect not working on submission
  • How to get array value from wordpress database get_results
  • how Automatically go from first.php to second.php
  • uploading file not working in codeigniter 3 error: you did not select any file
  • Yii2, gridview can not show some html tags inside cells
  • What are the thing we need to configure to implement live notification module (using redis and socket.io) in https serve
  • How to handle multi criterias search in PHP
  • PHP - Get maximum key and its value in array
  • PHP: how to retrieve all the metrics and dimensions from the Google Metadata API?
  • Deliver php mails to special-character-email adresses, such as äüö
  • Delete a single row from an MSSQL table from PHP
  • Property [name] does not exist on this collection instance
  • Pass input value through PHP parameter
  • Running two PHP versions on the same server (STRETCH)
  • Checking if a file has been selected for upload
  • Model not updating laravel
  • How to add a description of words from text to an array, to an array key by passing words?
  • Nginx rewrite rule not not passing variables if "/" is at the end of the url
  • Modify decimal point and thousands separator without changing the number of decimals
  • Remove PHP errors from CLI and PHPMyAdmin
  • Yii2 rest api - Url manager add parameters
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org