Как проверить два входа внутри HTML-формы, используя JavaScript из функции с двумя переменными?

Question

Я сделал HTML-форму и присвоил ей два входа: один для имени пользователя и один для номера мобильного телефона.Затем я сделал функцию в Java Script и сделал две переменные a и b для имени пользователя и номера мобильного телефона, но при отправке формы функция, кажется, работает только для одного из входных данных, может кто-нибудь предложить решение для этого?Я ожидаю, что сообщения, назначенные для имени пользователя и номера мобильного телефона, появятся в теге span при отправке формы

Я предоставляю код HTML и Java Script ниже

<form onSubmit="return valid()">
     HOME
     <p><input type="text" id="user_name" value=""><span id="msg"></span></p>
     Mobile
     <p><input type="text" id="mobile" value=""><span id="msg"></span></p>
     <p><input type="submit" value="submit"></p>

Документ JavaScript

function valid()
{
    var correct_way = /^[A-Za-z]+$/;
    var a=document.getElementById("user_name").value;
    if(a=="")
   {
       document.getElementById("msg").innerHTML=" please insert value";
       return false;

   }
    if(a.length<3)
   {
       document.getElementById("msg").innerHTML=" username cannot be less than 3 charachters";
       return false;

   }
    if(a.length>15)
   {
       document.getElementById("msg").innerHTML=" username cannot be greater than 15 charachters";
       return false;
   }
    if(a==correct_way)
   {
     true;
   }
    else
    {
        document.getElementById("msg").innerHTML=" username should be only charachter";
        return false;
    }

    var b=document.getElementById("mobile").value;
    if(b=="")
    {
        document.getElementById("msg").innerHTML=" please enter mobile number";
        return false;
    }
    if(isNaN(b))
    {
        document.getElementById("msg").innerHTML=" only numbers are allowed";
        return false;

    }
    if(b.length<10)
    {
        document.getElementById("msg").innerHTML=" mobile number must be 10 digit";
        return false;
    }
     if(b.length>10)
    {
        document.getElementById("msg").innerHTML=" mobile number must be 10 digit";
        return false;
    }

}

Answer 1

Если вы можете использовать проверку формы HTML 5, пожалуйста, сделайте это, потому что она сделает многое для вас и изначально поддерживается современными браузерами.

Если нет, я не совсем уверен, кто выпытаясь сделать несколько вещей, которые я вижу, вы вернете true перед проверкой второй переменной, поэтому поместите return true в конец функции и возвращайте false только в случае неудачной проверки.Во-вторых, как только вы вернете true, форма будет отправлена, поэтому ваша страница будет перезагружена, и если вы не используете свой код на стороне сервера для заполнения тегов span, вы ничего не увидите в них, потому что страница была перезагружена.Единственное, что нужно сделать, это убедиться, что ваш js не кэшируется, если вы загружаете его из файла js.Пожалуйста, дайте мне знать больше подробностей о том, что происходит, и я смогу помочь больше.

Возможно, пропущен возврат перед истиной, но тогда все после этого утверждения будет недоступно.

   if(a==correct_way)
   {
     true;
   }
    else
    {
        document.getElementById("msg").innerHTML=" username should be only charachter";
        return false;
    }

Answer 2

	  function valid()
{
    var correct_way = /^[A-Za-z]+$/;
    var a=document.getElementById("user_name").value;
    if(a=="")
   {
		document.getElementById("user_name").nextSibling.innerHTML=" please insert value";
       return false;

   }
    if(a.length<3)
   {
		document.getElementById("user_name").nextSibling.innerHTML=" username cannot be less than 3 charachters";
       return false;

   }
    if(a.length>15)
   {
   
	   document.getElementById("user_name").nextSibling.innerHTML=" username cannot be greater than 15 charachters";
       return false;
   }
   
   if(!correct_way.test(a)){
			document.getElementById("user_name").nextSibling.innerHTML=" username should be only charachter";
			return false;
   }

    var b=document.getElementById("mobile").value;
    if(b=="")
    {
		document.getElementById("mobile").nextSibling.innerHTML=" please enter mobile number";
        return false;
    }
    if(isNaN(b))
    {
        document.getElementById("mobile").nextSibling.innerHTML=" only numbers are allowed";
        return false;

    }
    if(b.length<10)
    {
        document.getElementById("mobile").nextSibling.innerHTML="  mobile number must be 10 digit";
        return false;
    }
     if(b.length>10)
    {
		document.getElementById("mobile").nextSibling.innerHTML="  mobile number must be 10 digit";
        return false;
    }

}
	  

	 <form onSubmit="return valid()">
     HOME
     <p><input type="text" name="user_name" id="user_name" value=""><span class="user_name"></span></p>
     Mobile
     <p><input type="text" name="mobile" id="mobile" value=""><span class="mobile"></span></p>
     <p><input type="submit" value="submit"></p>

Answer 3

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