2015-11-07 2 views
0
$document.ready(function(){ 




    var form = $("contact_form"); 
    var FName = $("fname"); //Creates Variables from forms 
    var FNameInfo = $("fnameInfo"); 
    var LName = $("lname"); 
    var Tele = $("tele"); 
    var Email = $("email"); 

    FName.blur(validateFName); 

    form.submit (function(){ 

     if (validateFName & validateSName & validateTele() & validateEmail()){ //If it passes all of these then return true 

     return true; 
    }else { 
       return false; 
       } 

     }); 

     function validateFName() { 
     if (FName.val().length < 5){       
       FName.addClass("error"); 
       FNameInfo.text("Incorrect Name"); 
       FNameInfo.addClass("error"); 
       return: false; 




     } 



     else { 

       FName.removeClass("error"); 
       FNameInfo.text("Whats your fname"); 
       FNameInfo.removeClass("error"); 
       return true; 
     } 
     } 
    }); 




<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8/"> 
     <title>this is my first</title> 
     <link rel = "stylesheet" href = "SecCustom.css" type = "text/css"/> 
     <script type = "application/javascript" src="js/jquery-1.11.3.min.js"></script> 
     <script type = "application/javascript" src="js/Validation.js"></script> 

     <script> 

     </script> 

    </head> 
    <body> 


     <div id = "container"> 
     <form action="" method="get" id = "contact_form"> 
      <div> 
         <label for ="name">First Name </label> 
         <input id = "fname" name = "fname" type = "text"/> 
        <span id = "fnameInfo" > Whats your first name?</span> 
      </div> 
      <div> 
       <label for ="lname">Last Name </label> 
       <input id = "lname" name = "lname" type = "text"/> 
       <span id = "lnameInfo" > Whats your last name?</span> 
      </div> 

      <div> 
       <label for ="tele">Telephone </label> 
       <input id = "tele" name = "tele" type = "text"/> 
       <span id = "fnameInfo" > Telephone</span> 
      </div> 

      <div> 
       <label for ="email">email </label> 
       <input id = "email" name = "email" type = "text"/> 
       <span id = "fnameInfo" > Whats your last email?</span> 
      </div> 

      <div> 
       <input id = "send" name = "send" type = "submit" value = "send"/> 
      </div> 


     </form> 

     </div> 
    </body> 
</html> 


#contact_form textarea.error{ 
    background:#f8dbdb; 
    border-color: #e77776; 


} 





#error { 

    margin-bottom:20px; 
    border:1px solid #efe; 


} 

Im пытается создать форму и использую JQuery для проверки im, пытаясь проверить первую часть формы, которая является «fname», а также имя и nothng, похоже, происходит с плагином? Я скопировал код JQuery в отдельный скрипт и создал путь src также, когда я копирую и вставляю код из сценария на HTML-страницу между тегами скриптов, все еще ничего, я попытался запустить тест, чтобы увидеть, работает ли JQuery, вставив предупреждение в HTML-файл с надписью «Hello World», и это сработало, поэтому я действительно смущен, потому что ничего не происходит: sПочему ничего не происходит?

ответ

2

У вас есть свои селекторы неправильно.

Делая это:

var form = $("contact_form"); 

Вы выбираете элементы DOM, чьи имя тега равны "CONTACT_FORM". Вы должны заменить его:

var form = $("#contact_form"); 

Вы должны прочитать эту tutorial.

+0

Ohh thankyou, моя ошибка, я, должно быть, не заметила его при наборе текста, но все равно то же самое, что и ничего. –

+1

Происходит ли в вашей консоли какие-либо ошибки? В первом выражении 'if' внутри функции submit вы проверяете' validateFName'. Поскольку это функция, а не переменная, которую вы должны заменить для 'validateFName()'. –

+0

Спасибо, что он работает сейчас! все, что я должен был исправить некоторые из ошибок, отображаемых в консоли, так или иначе процесс работает, но CSS не подходит, поэтому он выглядит немного понятным, почему? –

0

Вы получили ошибку в JavaScript в функции validateFName

return: false; 

должен быть

return false; 

Обновления вашего пролетных идентификаторов электронной почты и телефон, как они оба еще

fnameInfo 

Как уже указывалось, обновите все ваши селектора jQuery, включив тег #.

Обратитесь за помощью. Он не отправляется, потому что определяется только validateFName, но по крайней мере он пытается сейчас. https://jsfiddle.net/1xzcq8z9/13/

+0

Thankyou Я разобрал это, любая идея, как я могу отображать цвет в области текста, когда отображается ошибка? –

+0

Класс ошибок добавляется во вход и диапазон, поэтому вы можете создать css для этого: .error {color: red;} для обоих, input.error {color: red;} только для ввода или span.error { color: red;} только для диапазона. – partypete25

Смежные вопросы