Проверка формы с помощью JavaScript и отображение их на странице, а не в окне предупреждения

Я создал форму, которую мне нужно проверить с помощью JavaScript или JQuery. Как мне проверить, имеет ли раскрывающийся список значение «Заголовок», и если текстовое поле пусто, и отображать его на странице, а не в окне предупреждения:

       <form action="" method="post" accept-charset="UTF-8" name="myForm">
       <option value="Title" id="title_3-0"  disabled selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select></div></div>

Текстовое окно:

    <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">

Еще у меня есть кнопка.


javascript validation forms jquery
person user3120015    schedule 17.03.2014    source источник
comment
Итак, вопрос в том, как разместить сообщение на самой странице, вместо того, чтобы отображалось всплывающее окно с предупреждением?   -  person Katie Kilian    schedule 17.03.2014
comment
Да, я новичок в Javascript. Сообщение может отображаться в div как сводка или под каждым элементом управления.   -  person user3120015    schedule 17.03.2014
comment
Это не проблема JavaScript (или, по крайней мере, проблема не только JavaScript). Вы должны создать сообщение, которое хотите, как часть HTML, а затем сделать эти элементы скрытыми с помощью CSS display: none для этого элемента. Затем динамически отобразите или скройте сообщение об ошибке (эта часть - JavaScript). Но первый шаг - получить HTML и CSS так, как вы хотите, чтобы они выглядели при возникновении ошибки.   -  person Katie Kilian    schedule 17.03.2014
comment
@ user3120015, Вы абсолютно правы. Вы можете сделать это, добавив в свой html элемент div с идентификатором (допустим, id = testing). Затем из javascript вы можете вызвать document.getElementById('testing').innerHTML = "Text that you want to put";   -  person sshashank124    schedule 17.03.2014

Ответы (3)


arrow_upward
1
arrow_downward

Вот начало:

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error").innerHTML += "First name must be filled out<br />";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error").innerHTML += "You need to select a title<br />";
    return_value = false;
  }
  return return_value;
}
</script>


<span id="error"></span>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<input type="submit" value="Submit">
</form>

Если хотите, вы также можете поместить «элемент диапазона ошибок» над / под каждым полем и установить каждую ошибку отдельно:

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error1").innerHTML = "First name must be filled out";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error2").innerHTML = "You need to select a title";
    return_value = false;
  }
  return return_value;
}
</script>


<form name="myForm" onsubmit="return validateForm()" method="post">

First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<span id="error1"></span>

Title: <input .... >
<span id="error2"></span>

<input type="submit" value="Submit">
</form>
person Ason    schedule 17.03.2014
comment
Как мне заставить их проверять одновременно, поскольку он выполняет только первый оператор if? - person user3120015; 17.03.2014
comment
Я обновил свой ответ, указав, как это можно сделать. Хитрость заключается в том, чтобы поставить return true/false в конце вашего метода. - person Ason; 17.03.2014

arrow_upward
0
arrow_downward

Поскольку вы новичок в этом, поищите эти ссылки и прочтите. Он проведет вас через это. Это лучше, чем дать вам весь код. Потому что этот вид проверки формы важен, и, следовательно, вам лучше изучить его с нуля.

Link-1

Link-2

Link-3 (с использованием библиотеки)

person Aniruddha Pondhe    schedule 17.03.2014

arrow_upward
0
arrow_downward

HTML:

<select id="ddl"> <option value="Title" id="title_3-0" selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select>

<input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
    <input type="button" value="Submit" id="btn"/>
    <span id="error"/>

JQuery:

$('#btn').click(function (){
        if(($('#amf-input-firstname_4').val()=='') || ($("#ddl :selected").val() == 'Title'))
    {  
        $('#error').html('Please select title and enter name.');
    }
    else
    {
       $('#error').html('Success'); 
    }
    return false;
});

Демо:

http://jsfiddle.net/8h8HF/

person RGS    schedule 17.03.2014