Скрипт в jquery для проверки формы не работает

Question

Я создал форму для вставки нового продукта на свой сайт, и я хочу проверить его с помощью js, но он не работает, и я не знаю почему. У меня нет ошибок в консоли, но ничего из кода не работает. Я использую тот же код для проверки формы входа, и он работает, поэтому я не знаю, почему здесь не работает. Если вы можете помочь мне найти ошибки. Вот js

$(document).ready(function(){
    const form = $('#form');
    const title =  $('#title');
    const descr =  $('#descr');
    const budget = $('#budget');

    form.submit(e => {
        if(!checkInputs()){
            e.preventDefault();
        }
    });
});

function checkInputs() {
    const titleValue = $.trim(username.value);
    const descrValue = $.trim(descr.value);
    const budgetValue = $.trim(budget.value);

    console.log(titleValue);console.log(descrValue);console.log(budgetValue);

    let status = false;
    if(titleValue === '') {
        status = setErrorFor(title, 'Inserisci un titolo');
    }else{
        status = setSuccessFor(title);
    }

    if(descrValue === '') {
        status = setErrorFor(descr, 'Inserisci una descrizione');
    }else {
        status = setSuccessFor(descr);
    }

    if(budgetValue === '') {
        status = setErrorFor(budget, 'Inserisci un budget');
    } else {
        status = setSuccessFor(budget);
    }

    /*
    if(category === '') {
        status = setErrorFor(budget, 'Seleziona una categoria');
    }else{
        status = setSuccessFor(budget);
    }*/
    return status;
}


function setErrorFor(input, message) {
    const formControl = $(input).parent();
    const small = $(formControl).find('small');
    $(formControl).prop('classList', 'form-control error');
    small.append(message);
    return false;
}

function setSuccessFor(input) {
    const formControl = $(input).parent();
    $(formControl).prop('classList', 'form-control success');
    return true;
}

здесь html (я знаю, что это долго жаль):

<form action = "projects/post_project.php" method ="post" id="form">
            <div class="form-control">
                <div class = "legend">Scegli un titolo per il tuo progetto</div>   
                <div><input type="text" name="title" id="title" placeholder = "es.   Sito web per una piccola impresa" rows="5"></div>
                <small></small>
            </div>

            <div class="form-control">
                <div class = "legend">Dicci di più sul tuo progetto</div>
                <div><textarea rows = "5" id = "descr" type="text" name="descr" placeholder = "Descrivi il tuo progetto"></textarea></div>
                <small></small>
            </div>

            <div class="form-control">
                <div class = "legend">Qual è il tuo budget?</div>
                <select name="budget" id="budget">
                    <option>0€ - 250€</option>
                    <option>250€ - 750€</option>
                    <option>750€ - 1500€-</option>
                    <option>1500€ - 3000€</option>
                    <option>3000€ - 5000€</option>
                    <option>+ 5000€</option>
                </select>
                <small></small>
            </div>

                <!-- Pulsanti per scegliere la categoria -->
                <div class = "legend">In che categoria inseriresti il tuo progetto? </div>
                <small></small>
                    <div class = "category-list">      
                            <input type = "radio" name = "category" value = "web" id = "radio1"> 
                            <label class = "category" for = 'radio1'>
                                <img class = "menu-icon" src = "img/web.png">
                                <span>Web</span>    
                            </label> 

                            <input type = "radio" name = "category" value = "app" id = "radio2">
                            <label class = "category" for = 'radio2'>
                                <img class = "menu-icon" src = "img/app.png">
                                <span>App</span>
                            </label>

                            <input type = "radio" name = "category" value = "database" id = "radio3"> 
                            <label class = "category" for = 'radio3'>
                                <img class = "menu-icon" src = "img/database.png">
                                <span>Database</span>
                            </label>    
                    </div>

                    <div class = "category-list">
                            <input type = "radio" name = "category" value = "software" id = "radio4"> 
                            <label class = "category" for = 'radio4'>
                                <img class = "menu-icon" src = "img/software.png">
                                <span>Software</span>
                            </label>

                            <input type = "radio" name = "category" value = "sistemi" id = "radio5"> 
                            <label class = "category" for = 'radio5'>
                                <img class = "menu-icon" src = "img/sistemi.png">
                                <span>Sistemi</span>
                            </label>

                            <input type = "radio" name = "category" value = "altro" id = "radio6"> 
                            <label class = "category" for = 'radio6'>
                                <img class = "menu-icon" src = "img/other.png">
                                <span>Altro</span>
                            </label>
                    </div> 
                <!-- Fine pulsanti categoria -->

                <div class = "btn"><input type="submit" value="Pubblica"></div>
        </form>

вот css:

.form-control.success input {
   border-color: #2ecc71;
}

.form-control.error input {
   border-color: #e74c3c;
}

.form-control small {
   color: #e74c3c;
   font-size: 11pt;
   bottom: 0;
   left: 0;
   visibility: hidden;
}

.form-control.error small {
   visibility: visible;
}

Answer 1

Как упоминалось в моем комментарии, вы определяете status как false, а затем используете несколько операторов IF для проверки пустых полей. При выполнении каждой проверки status обновляется до нового значения. Это означает, что независимо от других проверок, последняя проверка является единственной, которая считается. С 3 проверками это может выглядеть так:

status = false;
status = false;
status = true;

Таким образом, результат будет true.

Рассмотрим следующий код.

$(function() {
  var form = $('#form');
  var title = $('#title');
  var descr = $('#descr');
  var budget = $('#budget');

  function checkInputs() {
    var titleValue = title.val().trim();
    var descrValue = descr.val().trim();
    var budgetValue = budget.val().trim();
    var status = true;
    if (titleValue === '') {
      status = status && setErrorFor(title, 'Inserisci un titolo');
    } else {
      status = status && setSuccessFor(title);
    }

    if (descrValue === '') {
      status = status && setErrorFor(descr, 'Inserisci una descrizione');
    } else {
      status = status && setSuccessFor(descr);
    }

    if (budgetValue === '') {
      status = status && setErrorFor(budget, 'Inserisci un budget');
    } else {
      status = status && setSuccessFor(budget);
    }

    console.log("Status", status);

    return status;
  }


  function setErrorFor(input, message) {
    var formControl = $(input).parent();
    var small = $("small", formControl);
    $(formControl).prop('classList', 'form-control error');
    small.append(message);
    return false;
  }

  function setSuccessFor(input) {
    const formControl = $(input).parent();
    $(formControl).prop('classList', 'form-control success');
    return true;
  }

  form.submit(e => {
    if (!checkInputs()) {
      e.preventDefault();
    }
  });
});

.form-control.success input {
  border-color: #2ecc71;
}

.form-control.error input {
  border-color: #e74c3c;
}

.form-control small {
  color: #e74c3c;
  font-size: 11pt;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.form-control.error small {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="projects/post_project.php" method="post" id="form">
  <div class="form-control">
    <div class="legend">Scegli un titolo per il tuo progetto</div>
    <div><input type="text" name="title" id="title" placeholder="es.   Sito web per una piccola impresa" rows="5"></div>
    <small></small>
  </div>
  <div class="form-control">
    <div class="legend">Dicci di più sul tuo progetto</div>
    <div><textarea rows="5" id="descr" type="text" name="descr" placeholder="Descrivi il tuo progetto"></textarea></div>
    <small></small>
  </div>
  <div class="form-control">
    <div class="legend">Qual è il tuo budget?</div>
    <select name="budget" id="budget">
      <option>0€ - 250€</option>
      <option>250€ - 750€</option>
      <option>750€ - 1500€-</option>
      <option>1500€ - 3000€</option>
      <option>3000€ - 5000€</option>
      <option>+ 5000€</option>
    </select>
    <small></small>
  </div>
  <!-- Pulsanti per scegliere la categoria -->
  <div class="legend">In che categoria inseriresti il tuo progetto? </div>
  <small></small>
  <div class="category-list">
    <input type="radio" name="category" value="web" id="radio1">
    <label class="category" for='radio1'><img class = "menu-icon" src = "img/web.png"><span>Web</span></label>
    <input type="radio" name="category" value="app" id="radio2">
    <label class="category" for='radio2'><img class = "menu-icon" src = "img/app.png"><span>App</span></label>
    <input type="radio" name="category" value="database" id="radio3">
    <label class="category" for='radio3'><img class = "menu-icon" src = "img/database.png"><span>Database</span></label>
  </div>
  <div class="category-list">
    <input type="radio" name="category" value="software" id="radio4">
    <label class="category" for='radio4'><img class = "menu-icon" src = "img/software.png"> <span>Software</span></label>
    <input type="radio" name="category" value="sistemi" id="radio5">
    <label class="category" for='radio5'><img class = "menu-icon" src = "img/sistemi.png"><span>Sistemi</span></label>
    <input type="radio" name="category" value="altro" id="radio6">
    <label class="category" for='radio6'><img class = "menu-icon" src = "img/other.png"><span>Altro</span></label>
  </div>
  <!-- Fine pulsanti categoria -->
  <div class="btn"><input type="submit" value="Pubblica"></div>
</form>

Можно также рассмотреть возможность проверки события blur, чтобы пользователь получал обратную связь при перемещении по форме.

$(function() {
  var form = $('#form');
  var errs = {
    title: 'Inserisci un titolo',
    descr: 'Inserisci una descrizione',
    budget: 'Inserisci un budget',
  };

  function isEmpty(el) {
    return $(el).val().length === 0;
  }

  function showError(el) {
    var formControl = $(el).closest(".form-control");
    formControl.removeClass("success").addClass("error");
    $("small", formControl).html(errs[$(el).attr("id")]);
  }

  function hideError(el) {
    var formControl = $(el).closest(".form-control");
    formControl.removeClass("error").addClass("success");
    $("small", formControl).html("");
  }

  $("#title, #descr, #budget").blur(function(e) {
    var formControl = $(this).parent();
    var id = $(this).attr("id");
    if (isEmpty(this)) {
      formControl.addClass("error");
      showError(this);
    } else {
      formControl.addClass("success");
      hideError(this);
    }
  });
});

.form-control.success input,
.form-control.success textarea,
.form-control.success select {
  border-color: #2ecc71;
}

.form-control.error input,
.form-control.error textarea,
.form-control.error select {
  border-color: #e74c3c;
}

.form-control small {
  color: #e74c3c;
  font-size: 11pt;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.form-control.error small {
  visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="projects/post_project.php" method="post" id="form">
  <div class="form-control">
    <div class="legend">Scegli un titolo per il tuo progetto</div>
    <div>
      <input type="text" name="title" id="title" placeholder="es.   Sito web per una piccola impresa" rows="5">
    </div>
    <small></small>
  </div>
  <div class="form-control">
    <div class="legend">Dicci di più sul tuo progetto</div>
    <div>
      <textarea rows="5" id="descr" type="text" name="descr" placeholder="Descrivi il tuo progetto"></textarea>
    </div>
    <small></small>
  </div>
  <div class="form-control">
    <div class="legend">Qual è il tuo budget?</div>
    <select name="budget" id="budget">
      <option></option>
      <option>0€ - 250€</option>
      <option>250€ - 750€</option>
      <option>750€ - 1500€-</option>
      <option>1500€ - 3000€</option>
      <option>3000€ - 5000€</option>
      <option>+ 5000€</option>
    </select>
    <small></small>
  </div>
  <!-- Pulsanti per scegliere la categoria -->
  <div class="legend">In che categoria inseriresti il tuo progetto? </div>
  <small></small>
  <div class="category-list">
    <input type="radio" name="category" value="web" id="radio1">
    <label class="category" for='radio1'><img class = "menu-icon" src = "img/web.png"><span>Web</span></label>
    <input type="radio" name="category" value="app" id="radio2">
    <label class="category" for='radio2'><img class = "menu-icon" src = "img/app.png"><span>App</span></label>
    <input type="radio" name="category" value="database" id="radio3">
    <label class="category" for='radio3'><img class = "menu-icon" src = "img/database.png"><span>Database</span></label>
  </div>
  <div class="category-list">
    <input type="radio" name="category" value="software" id="radio4">
    <label class="category" for='radio4'><img class = "menu-icon" src = "img/software.png"> <span>Software</span></label>
    <input type="radio" name="category" value="sistemi" id="radio5">
    <label class="category" for='radio5'><img class = "menu-icon" src = "img/sistemi.png"><span>Sistemi</span></label>
    <input type="radio" name="category" value="altro" id="radio6">
    <label class="category" for='radio6'><img class = "menu-icon" src = "img/other.png"><span>Altro</span></label>
  </div>
  <!-- Fine pulsanti categoria -->
  <div class="btn"><input type="submit" value="Pubblica"></div>
</form>