champ – devfrontend.info

Testé fonctionnele Magento 2.4. Sources:

jQuery.validator.addMethod() dans la documentation officielle de jQuery Validate
Magento 2: How to set custom validation message?
Peut également être utile: changer le libellé des messages d’erreurs du champ mot de passe (password field)

require([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    $("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

    $.validator.addMethod(
        'product-custom-option-required', function (value) {
            if(value) return true;
            else return false;
        }, $.mage.__('Please select a variant!'));
});

require([

'jquery',

'jquery/ui',

'jquery/validate',

'mage/translate'

], function($){

$("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

$.validator.addMethod(

'product-custom-option-required', function (value) {

if(value) return true;

else return false;

}, $.mage.__('Please select a variant!'));

});

Solution moderne avec la propriété CSS `box-sizing` :

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Solution obsolète :

Source : Input field and submit button on the same line, full width.

<form>
  <button>Ok</button>
  <div class="input-wrapper">
    <input type="text" />
  </div>
</form>

<form>

</div>

</form>

button { 
  float: right;
}
.input-wrapper {
  overflow: hidden;
  padding-right: 15px;
}
input {
  width: 100%;
}

button {

float: right;

}

.input-wrapper {

overflow: hidden;

padding-right: 15px;

}

input {

width: 100%;

}

Articles récents

Catégories

Archives

Méta

Étiquette : champ

[Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS `box-sizing` :

Solution obsolète :

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Solution moderne avec la propriété CSS `box-sizing` :