javascript - "Required field"验证消息与国家选择字段重叠

Question

最近我使用 html、css 和 jQuery 创建了一个表单......在那里我还显示了“必填字段”验证......但是如果我点击提交按钮而不填写国家字段，显示“必填字段”验证消息，但它与国家选择字段重叠......我需要帮助......谢谢大家......点击查看图片

<style>
  .captitalize {
    text-transform: capitalize;
  }
  
  .nav-menu {
    display: none
  }
</style>
<div class="account-create login login-register">
  <div class="col-xs-12 col-sm-6 col-md-6 box register">
    <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="form-validate" class="form-box register-form">
      <li><label for="email_address"><?php echo $this->__('Email Address') ?> <span
								class="required">*</span></label>
        <div class="input-box">
          <input type="text" name="email" id="email_address" value="<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>" title="<?php echo $this->__('Email Address') ?>" class="form-control input-text input-block-level required-entry validate-email"
          />
        </div>
      </li>
      <?php if (Computenext_Global_Config::getInstance()->hasAttribute('SIMPLIFIED_SIGN_UP_FLOW')): ?>
      <li><label for="password"><?php echo $this->__('Password') ?> <span
								class="required">*</span></label>
        <div class="input-box">
          <input type="password" name="password" id="password" value="<?php echo $this->escapeHtml($this->getFormData()->getPassword()) ?>" title="<?php echo $this->__('Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password"
          />
        </div>
      </li>
      <li><label for="cpassword"><?php echo $this->__('Confirm Password') ?> <span
								class="required">*</span></label>
        <div class="input-box">
          <input type="password" name="cpassword" id="cpassword" value="<?php echo $this->escapeHtml($this->getFormData()->getCpassword()) ?>" title="<?php echo $this->__('Confirm Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password validate-cpassword"
          />
        </div>
        <div class="field">
          <label for="company"><?php echo $this->__('Company') ?> <span
							class="required">*</span></label>
          <div class="input-box">
            <input type="text" name="company" id="company" value="<?php echo $this->escapeHtml($this->getFormData()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="form-control input-text  required-entry validate-alphanum-with-hypens-spaces input-block-level<?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>"
              maxlength="75" />
          </div>
        </div>

        <!-- country selection drop down -->

        <div class="field">
          <label for="country"><?php echo $this->__('Country') ?> <span
							class="required">*</span> </label>
          <div class="input-box" id="country-dropdown">
            <?php //echo $this->getCountryHtmlSelect() ?>
            <select id="country_id" name="country_id" class="validate-select without-styles form-control required-entry" onchange="setStateCode(this.value);">
								<option value=""><?php echo $this->__('--Please Select--'); ?></option>
							</select>
          </div>
        </div>

        <div class="field">
          <label for="postcode"><?php echo $this->__('Postcode') ?><span
							class="required">*</span></label>
          <div class="input-box">
            <input type="text" name="postcode" id="postcode" value="<?php echo $this->escapeHtml($this->getFormData()->getPostcode()) ?>" title="<?php echo $this->__('Postcode') ?>" class="form-control input-text input-block-level required-entry validate-zip-code-international validate-zip-code"
              maxlength="8" />
          </div>
        </div>

        <!--  state selection dropdown/textbox-->

        <div class="field">
          <label for="company"><?php echo $this->__('State/Region/Country') ?><span class="required">*</span></label>
          <div class="input-box" id="region-div-dropdown">
            <select id="region" name="region" class="validate-select without-styles form-control required-entry">
								
							</select>
          </div>
        </div>

        <div class="field">
          <label for="city"><?php echo $this->__('Town/City') ?><span
							class="required">*</span></label>
          <div class="input-box">
            <input type="text" name="city" id="city" value="<?php echo $this->escapeHtml($this->getFormData()->getCity()) ?>" title="<?php echo $this->__('Town/City') ?>" class="form-control input-text input-block-level required-entry" />
          </div>
        </div>

        <div class="field">
          <label for="address1"><?php echo $this->__('Address 1') ?> <span
							class="required">*</span></label>
          <div class="input-box">
            <input type="text" name="address1" id="address1" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress1()) ?>" title="<?php echo $this->__('address 1') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address1') ?>"
            />
          </div>
        </div>

        <div class="field">
          <label for="address2"><?php echo $this->__('Address 2') ?> <span
                                    class="required">*</span></label>
          <div class="input-box">
            <input type="text" name="address2" id="address2" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress2()) ?>" title="<?php echo $this->__('Address 2') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address2') ?>"
            />
          </div>
        </div>

        <div class="field">
          <label for="phoneno"><?php echo $this->__('Phone Number') ?> <span
							class="required">*</span></label>
          <div class="input-box">
            <div class="country-data">
              <div class="country-code">
                <input type="text" name="phone_code" id="phone_code" value="" class="input-text" readonly="readonly" />
              </div>
              <div class="phone-numer">
                <input type="text" name="phoneno" id="phoneno" value="<?php echo $this->escapeHtml($this->getFormData()->getPhone()) ?>" title="<?php echo $this->__('Phone Number') ?>" class="form-control input-text required-entry validate-phoneLax input-block-level"
                  maxlength="15" onblur="trimPhone(this.id);" />
              </div>
            </div>
          </div>
        </div>
  </div>
  <div class="buttons-box clearfix">
    <button type="submit" class="button btn btn-primary">
						<?php echo $this->__('Submit') ?>
					</button>
    <span class="required"><b>*</b> <?php echo $this->__('Required Fields') ?></span>
  </div>
  </form>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    var isIE = /*@cc_on!@*/ false || !!document.documentMode;
    if (isIE) {
      //jQuery("#modal-alert-tag").modal('show');
      jQuery("#captcha-reload").trigger("click");
    }
    loadCountries();

    jQuery('#region-div-text').hide();
    jQuery('#region').parent().parent().hide();
  });
  var dataForm = new VarienForm('form-validate', true);

  Validation.add('region-other-text', '<?php echo $this->__('
    This is a required field.
    '); ?>',
    function(v) {
      var val = jQuery('#region').val();
      if (val == 'other') { //validate only if region will be in "other".
        return !Validation.get('IsEmpty').test(v);
      } else {
        return true;
      }
    });

  <?php if($this->getShowAddressFields()): ?>
  new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'zip');
  <?php endif; ?>


  function loadCountries() {
    var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
    var urlString = "/js/" + bcmName.toLowerCase() + "/country_list.json";
    var jsonTxt = jQuery.ajax({
      url: urlString,
      dataType: "json",
      async: false
    }).responseText;
    var jsonData = JSON.parse(jsonTxt);
    var htm = '';
    for (var c = 0; c < jsonData.length; c++) {
      var countryObj = jsonData[c];
      if (typeof countryObj !== 'undefined') {
        htm += '<option value=' + countryObj.code + '>' + countryObj.country + '</option>';
      }
    }
    jQuery('#country_id').append(htm);
  }

  function setStateCode(country) {
    var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
    if (country == "") {
      jQuery('#region').parent().parent().hide();
      jQuery('#phone_code').val('');
    } else {
      var jsonTxt = jQuery.ajax({
        url: "/js/" + bcmName.toLowerCase() + "/country_list.json",
        dataType: "json",
        async: false
      }).responseText;
      var jsonData = JSON.parse(jsonTxt);
      var htm = '';
      for (var c = 0; c < jsonData.length; c++) {

        var countryObj = jsonData[c];
        //alert(JSON.stringify(countryObj));
        if (country == countryObj.code) {
          var stateList = countryObj.states;
          if (stateList.length == 0) {
            jQuery('#region').parent().parent().hide();
          } else {
            jQuery('#region').parent().parent().show();
            htm += '<option value=""><?php  echo $this->__('--Please Select--')?></option>';
            for (var s = 0; s < stateList.length; s++) {
              htm += '<option value=' + stateList[s].key + '>' + stateList[s].value + '</option>';
            }
          }
          jQuery('#phone_code').val('+' + countryObj.phonecode);
        }
      }
      jQuery('#region').html(htm);
    }
  }
</script>
</div>

Snap For Image

Answer 1

试一试

margin-top 设置为 -20px 使其成为 -10px。试试吧

CSS

.validation-advice{
    margin-top: -10px;
}

希望这有助于...