Use map function to validate each input and create border around the input which is invalid or empty on button click答案

【问题标题】：Use map function to validate each input and create border around the input which is invalid or empty on button clickUse map function to validate each input and create border around the input which is invalid or empty on button click
【发布时间】：2022-11-20 12:58:35
【问题描述】：

i am working on a form which has multiple steps so in each step when i click next it validate the current active step page with map function. i want to achieve Use map function to validate each input and create border around the input which is invalid or empty on button click why i am doing this is that i don't want to get the values of input one by one and apply conditions on them.

new to JS and jQuery. Any help will be appreciated

what i tried so far but no result only error

var getstep1 = $("#step1 :input").map(function(getinput)
{   
    if($(getinput).val() == '')
    {
        return $(this).css('width', '10px');
    }
    else
    {
        $(".next").click(function() {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
        });
    }
      // return this.value;
}).get();

【问题讨论】：

标签： javascript html jquery map-function

【解决方案1】：

Don't take it that complicated. You can use a form validator, you can download it here

Load the validator.js script into the document.
Load the multifield.js if you’d like to validate a form field containing multiple inputs.
Disable the native HTML5 data validation on your form.
...
1. Apply validators to the form fields using the following attributes:
- required: is required?
- pattern: ‘numeric’, ‘alphanumeric’, ‘url’, ‘phone’, ’email’, or custom regex.
- data-validate-words: Specify the minimum amount of words for this field.
- data-validate-length: Specify the length allowed for the field (after trim). For example: [3,10] means that the field can only have 3 or 10 characters.
- data-validate-length-range: Specify the minimum and/or maximum number of chars in the field (after trim).
- data-validate-linked: Specify the field which the current field’s value (the attribute is set on) should be compared to.
- data-validate-minmax: Specify the minimum and/or maximum value.
  
  Name Occupation Email Confirm Email address Number
1. Initialize the form validator on the form element and done.
  
  var validator = new FormValidator({ // options here });
2. Validate the form on submit (OPTIONAL).
  
  document.forms.onsubmit = function(e){ var submit = true, validatorResult = validator.checkAll(this); console.log(validatorResult); return !!validatorResult.valid; };
3. Default settings to config the form validator.
  
  var validator = new FormValidator({ // shows alert tooltip alerts : true, // custom trigger events // e.g. ['blur', 'input', 'change'] events : false, // predefined validators regex : { url : /^(https?://)?([wd-_]+.+[A-Za-z]{2,})+/?/, phone : /^+?([0-9]|[-|' '])+$/i, numeric : /^[0-9]+$/i, alphanumeric : /^[a-zA-Z0-9]+$/i, email : { illegalChars : /[()<>,;:/"[]]/, filter : /^.+@.+..{2,6}$/ // exmaple email "steve@s-i.photo" } }, // default CSS classes classes : { item : 'field', alert : 'alert', bad : 'bad' } });
4. Default error messages.
  
  texts : { invalid : 'inupt is not as expected', short : 'input is too short', long : 'input is too long', checked : 'must be checked', empty : 'please put something here', select : 'Please select an option', number_min : 'too low', number_max : 'too high', url : 'invalid URL', number : 'not a number', email : 'email address is invalid', email_repeat : 'emails do not match', date : 'invalid date', time : 'invalid time', password_repeat : 'passwords do not match', no_match : 'no match', complete : 'input is not complete' },
The form will look like this:

【讨论】：