ошибка в валидации
 

доброе времени суток есть форма как в валидации поставить мин макс символов ставлю if (name == '' && length > 4 ) не работает 2) добавить тип инпута в валидацию ,текст, емайл ,,,,

<form id="myForm"  onsubmit="send_form(); return false;" action="" method="POST">
                        <p class="mt-3 "> First name </p>
                        <div class="form-group" >
                            <input type="text" class="form-control " name="first_name" id="first_name" placeholder=" Enter your first name" required  id="first_name">
                            <span class="form-block" id="block-name"></span>
                        </div>
                        <p class="mt-3 "> Last name </p>
                        <div class="form-group">
                            <input type="text" class="form-control " name="last_name" id="last_name" placeholder=" Enter your last name " required min="2" max="30">
                            <span class="form-block"></span>
                        </div>
                        <p class="mt-3 "> Email </p>
                        <div class="form-group">
                            <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder=" Enter your Email  " required min="2" max="30">
                            <span class="form-block"></span>
                        </div>
                        <p class="mt-3 ">Phone </p>
                        <div class="form-group">
                            <input type="number" class="form-control " name="phone" id="phone" placeholder="+ XX (XXX)  XXX XX XX   " required min="7">
                            <span class="form-block"></span>
                        </div>
                         <p class=" mt-5 border-bottom-main"> Your question </p>
                         
                         <p class="mt-4 mb-2">Message</p>
                           
                        
                         
                         <div class="form-group     align-items-start">
                         <textarea class="form-control" rows="6" name="message" placeholder="Enter your question" id="message" required="" min="4"></textarea>
                         <span class="form-block"></span>
                          </div>
                          <div class="row">
                              <div class="col-12  col-md-5 col-lg-5  offset-md-7  mt-4">
                                  <button type="submit" class="button button-home" onclick="valid()" >Submit </button> 
                              </div>
                          </div>
                    </form>

function valid() {
            
 
            let name = $('#first_name').val().length;

            if (name == '' && length > 4 ) {
                $('#first_name').css('border', '1px solid #E2402D')
                $('#first_name').css('box-shadow', 'none')
               $('#block-name').css('background-image', 'url(img/error.png)')
                

            } else {
                    
                    $('#first_name').css('border', '1px solid #313348')
                    $('#first_name').css('background-image', 'none')
                    $('#block-name').css('background-image', 'url(img/done.png)')
                
               
            }

            alert(name)
        }

if (name == '' && length > 4 )

А что такое length ?

widht строки (количиство символов)

misha.korolcov,

let text = $('#first_name').val().trim();

            if (txt.length < 4 ) {

у меня вишло так еще думаю как зделать проверку на тупе

<script>
        function valid() {

         


            let name = $('#first_name ').val()
             let namelast = $('#last_name ').val()
             let email = $('#email ').val()
             let phone = $('#phone ').val()
              let message = $('#message ').val()
           
             

            if (name == '') {
                $('#first_name').css('border', '1px solid #E2402D')
                $('#first-name-text').css('color', ' #E2402D')
                $('#first_name').css('box-shadow', 'none')
                $('#block-name').css('background-image', 'url(img/error.png)')
            } else {
                 if(name.length <= 2 || name.length >= 10 ){
                  $('#first_name').css('border', '1px solid #E2402D')
                $('#first-name-text').css('color', ' #E2402D')
                $('#first_name').css('box-shadow', 'none')
                $('#block-name').css('background-image', 'url(img/error.png)')
                    }else {
                     $('#first_name').css('border', '1px solid #313348')
                $('#first-name-text').css('color', '#FFFFFF')
                $('#block-name').css('background-image', 'url(img/done.png)')
                    }
                
               
            }

            if (namelast == '') {
                $('#last_name').css('border', '1px solid #E2402D')
                $('#last-name-text').css('color', ' #E2402D')
                $('#last_name').css('box-shadow', 'none')
                $('#block-last-name').css('background-image', 'url(img/error.png)')
            } else {
                $('#last_name').css('border', '1px solid #313348')
                $('#last-name-text').css('color', '#FFFFFF')
                $('#block-last-name').css('background-image', 'url(img/done.png)')
            }
            
            
            if (email == '') {
                $('#email').css('border', '1px solid #E2402D')
                $('#email-text').css('color', ' #E2402D')
                $('#email').css('box-shadow', 'none')
                $('#block-email').css('background-image', 'url(img/error.png)')
            } else {
                $('#email').css('border', '1px solid #313348')
                $('#email-text').css('color', '#FFFFFF')
                $('#block-email').css('background-image', 'url(img/done.png)')
            }
            
              if (phone == '') {
                $('#phone').css('border', '1px solid #E2402D')
                $('#phone-text').css('color', ' #E2402D')
                $('#phone').css('box-shadow', 'none')
                $('#block-phone').css('background-image', 'url(img/error.png)')
            } else {
                $('#phone').css('border', '1px solid #313348')
                $('#phone-text').css('color', '#FFFFFF')
                $('#block-phone').css('background-image', 'url(img/done.png)')
            }
            
            
            if (message == '') {
                $('#message').css('border', '1px solid #E2402D')
                $('#message-text').css('color', ' #E2402D')
                $('#message').css('box-shadow', 'none')
                $('#block-message').css('background-image', 'url(img/error.png)')
                
            } else {
                $('#message').css('border', '1px solid #313348')
                $('#message-text').css('color', '#FFFFFF')
                $('#block-message').css('background-image', 'url(img/done.png)')
            }
            
            

            

            alert(phone)
        }
    </script>