Форма отправляется даже при недопустимом вводе

#javascript #html #jquery #forms #validation

#javascript #HTML #jquery #формы #проверка

Вопрос:

Я пытаюсь проверить ввод текста в моем html. Мне нужны только алфавиты и пробелы. Вначале проверка работала, но теперь это не так, и я, похоже, не могу найти проблему. Он по-прежнему отправляет форму с недопустимым полем. Пожалуйста, посмотрите код ниже

index.html

 <div class="full-form">
    <form class=form-info action="cv.html" onsubmit="return handlesubmit()" >
    <div class="f-header">
        SIGN UP
    </div>
    
    <div class="bdetails">
        <label for="fname">First Name</label><br>
        <input type="text" name="fname" id="f_name" placeholder="First Name" onfocus="checkFName()" onblur="BlurFName()" required><br>
        <p class="error_message" id="First_em">Name must contain only alphabets(A-Z)</p>
    </div>
    <script type="text/javascript" src="test.js"></script>
    </form>

test.js

 function checkData(){
    if(BlurFName()){
   
    }
    return false;
}


function handlesubmit(){
   checkData();
        passvalue();
    

}

/*
Функция проверки, является ли введенное имя действительным при фокусировке ввода
*/

 function checkFName(){
    let name_len=/^[A-Za-z] $/;
    let fname= document.getElementById("f_name");
    if(!fname.value.match(name_len)){
        document.getElementById("First_em").style.display = "inline";
        return true;
    } 
};

/*
Функция проверки правильности введенного имени при размытом вводе
*/

 function BlurFName(){   
    let name_len=/^[A-Za-z] $/;
    let fname= document.getElementById("f_name");

    if(fname.value.match(name_len)){
        document.getElementById("First_em").style.display = "none";
        return false;
    }

};

1. handlesubmit ничего не возвращает…..

2. @epascarello хорошо. Я изменил функцию handlesubmit(), и на этот раз она не отправляется, но после исправления неверного ввода она все равно не проходит

3. Где возвращаемое значение true / false? function handlesubmit(){ let isValid = true; return isValid; }

4. @epascarelloI Я пробовал это, но после действительного ввода он не отправляется

5. чем вы не возвращаете true, если оно действительно

Ответ №1:

С помощью функции handlesubmit вам нужно вернуть false или true.

Я предлагаю использовать

 e.preventDefault();

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

Ответ №2:

Вы ничего не возвращаете из своего метода проверки. Вам нужно сделать что-то вроде этого:

 function validateName () {
  const inp = document.getElementById("fname");
  const isValid = inp.value.trim().length > 0;
  inp.classList.toggle('error', !isValid);
  return isValid;
}

function validateGuess () {
  const inp = document.getElementById("guess");
  const isValid =  inp.value.trim() > 10;
  inp.classList.toggle('error', !isValid);
  return isValid;
}

function validate () {
  const isNameValid = validateName();
  const isGuessValid = validateGuess();
  return isNameValid amp;amp; isGuessValid;
}

 .error { border-color: red; }

 <form onsubmit="return validate()">
  <label for="fname">name</label> <input type="text" name="fname" id="fname" /><br/>
  <label for="guess">guess</label> <input type="number" name="guess" id="guess" />
  <button>Submit</button>
</form>