2014-01-21 2 views
6

Я пытаюсь вызвать функцию JavaScript при отправке формы.Функция javascript для отправки формы

Вот код, но пока функция отправки не вызывается, предложите что-нибудь, и я хочу показать сообщения об ошибках с помощью javascript-метода, как показать сообщения об ошибках при проверке с помощью JavaScript.

<form id="register" name="register" onsubmit="validateForm()"> 
<label for="Username"> Username </label><br> 
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br> 
<label for="Password"> Password </label><br> 
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br> 
<label for="Confirm-Password"> Confirm Password </label><br> 
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br> 

<label for="email"> Email </label><br> 
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br> 
<button type="submit">Submit</button> 

</form> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#register").validate({ 
     rules: { 
      "Username": { 
       required: true, 
      }, 
      "Password": { 
       required: true, 
       minlength: 5 
      }, 
      "Confirm-Password": { 
       required: true, 
      }, 
      "email": { 
       required: true, 
      } 
     } 
    }); 
}); 
</script> 

и здесь JavaScript код

function validateForm() 
{ 
    var password = document.forms["register"]["Password"].value; 
    var con-password = document.forms["register"]["Confirm-Password"].value; 
    if(password != con-password) 
    { 
     document.getElementById('password-error').style.visibility='visible'; 
     alert("not matched"); 
    } 
    alert("matched"); 
} 
+0

onsubmit = "validateForm()" заменить onsubmit = "return validateForm()". попробуйте это – krutssss

+0

@kruti я уже пробовал не работать. – chandan111

+0

может кто угодно, пожалуйста, поделитесь рабочим кодом, как на jsfiddle – chandan111

ответ

5

Это, вероятно, из-за синтаксической ошибки в сценарии. Когда вы увидите подобные ошибки, загляните в консоль JavaScript вашего браузера.

В этом случае con-password не является допустимым именем переменной. Что JavaScript видит:

var con - password ... 

т.е. код говорит "password из вычесть con". Попробуйте подчеркивание вместо:

var con_password ... 
+0

спасибо learan новое, добавлено, но все же fuction не работает. – chandan111

+0

И что вы видите на консоли ошибок? –

+0

Событие returnValue устарело. Вместо этого используйте стандартное событие event.preventDefault(). – chandan111

-2

Используйте этот код

<input type="button" id="close" value="Submit" onClick="window.location = 'validateForm()'"> 

сделать одну вещь я посылаю одну ссылку, пожалуйста, перейдите по этой ссылке я прокомментировал свой код там скопировать и вставить его и протестировать его. ...

How to do validation in JQuery dialog box?

если этот ответ правильный, то, пожалуйста, отметьте его как ответ для других ....

-1

Может быть, вы пропустили - вам нужно использовать метод = «пост» в

http://jsfiddle.net/dLbLS/

<form id="register" name="register" method="post" onsubmit="validateForm();" > 
    <label for ="Username"> Username </label><br> 
    <input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br> 
    <label for ="Password"> Password </label><br> 
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br> 
    <label for ="Confirm-Password"> Confirm Password </label><br> 
    <input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br> 

    <label for="email" > Email </label><br> 
    <input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br> 
<button type="submit" >Submit</button> 

</form> 
5

Не нужно делать ничего лишнего для согласования пароля, просто добавьте equalTo: "#Password" к нему, как показано на ниже пример:

$(document).ready(function() { 
    $("#register").validate({ 
     rules: { 
      "Username": { 
       required: true, 
      }, 
      "Password": { 
       required: true, 
       minlength: 5 
      }, 
      "Confirm-Password": { 
       required: true, 
       equalTo: "#Password" 
      }, 
      "email": { 
       required: true, 
      } 
     }, 
     messages: { 
     Password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
        }, 
     Confirm-Password: { 
        required: "Please provide a confirm password", 
        equalTo: "Please enter the same password as above" 
        } 
     }, 
     submitHandler: function(form) { 
      // Your function call 
      return false; // return true will submit form 
      } 
    }); 
}); 

Рабочий пример:

<form id="register" name="register" action="" method="post"> 
<label for="Username"> Username </label><br> 
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br> 
<label for="Password"> Password </label><br> 
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password"><br><br> 
<label for="Confirm-Password"> Confirm Password </label><br> 
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br><br> 

<label for="email"> Email </label><br> 
<input type="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br> 
<button type="submit">Submit</button> 

</form> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#register").validate({ 
     rules: { 
      "Username": { 
       required: true, 
      }, 
      "Password": { 
       required: true, 
       minlength: 5 
      }, 
      "Confirm_Password": { 
       required: true, 
       equalTo: "#Password" 
      }, 
      "email": { 
       required: true, 
      } 
     }, 
     messages: { 
     Password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
        }, 
     Confirm_Password: { 
        required: "Please provide a confirm password", 
        equalTo: "Please enter the same password as above" 
        } 
     }, 
     submitHandler: function(form) { 
      // Your function call 
      return false; // return true will submit form 
      } 
    }); 
}); 
</script> 
+0

спасибо, что это работает для меня, но я тоже хочу использовать javascript. – chandan111

+0

Насколько я знаю, jQuery - это JS;) – szpic

+1

Вы можете использовать submitHandler: function (form) {/ * ваш вызов функции */return false; } – Anubhav

3

Возможно, вместо проверки совпадений паролей вы можете добавить новое правило в валидацию? что-то вроде:

  ... "Password": { 
      required: true, 
      minlength: 5 
     }, 
     "Confirm-Password": { 
      required: true, 
      equalTo: "#Password"} .... 

и для сообщений добавить:

... messages: { 
      "Password": "Your message", 

     }... 

и все во всем что-то вроде этого: `

$(document).ready(function() { 
$("Your form name").validate({ 
    rules: { 
     "Username": { 
      required: true, 
     }, 
     "Password": { 
      required: true, 
      minlength: 5 
     }, 
     "Confirm-Password": { 
      required: true, 
      equalTo: "#Password" 
     }, 
     "email": { 
      required: true, 
      email: true 
     } 
    } 
     messages: { 
      "Password": "Your message", 
      "email": "Your Message", 
     }, 
     submitHandler: function (form) { 
      form.submit(); 
     } 
    }); 
});` 
+0

спасибо, пожалуйста, напишите часть сообщений для пароля и электронной почты только для подтверждения синтаксиса. – chandan111

+0

добавлен. Но могли ли у меня какие-то орфографические ошибки. На данный момент у вас нет возможности проверить это. – szpic

0

попробовать это.я добавить OnClick событие на кнопку отправки вызова функции validateForm()

HTML

<form id="register" name="register"> 
<label for ="Username"> Username </label><br> 
<input type="text" class="register-control" id="Username" name="Username" placeholder="Enter Username"> <br><br> 
<label for ="Password"> Password </label><br> 
<input type="password" class="register-control" id="Password" name="Password" placeholder="Enter Password" ><br><br> 
<label for ="Confirm-Password"> Confirm Password </label><br> 
<input type="password" class="register-control" id="Confirm-Password" name="Confirm-Password" placeholder="Confirm Password" ><br><br> 

<label for="email" > Email </label><br> 
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br> 
<button type="submit" onclick="validateForm()">Submit</button> 

</form> 

это validateForm()

<script type="text/javascript"> 
    function validateForm() { 
     var username = $('#Username'), 
      password = $('#Password'), 
      confirm = $('#Confirm-Password'), 
      email = $('#email'); 

     $('#register').submit(function(ev){ 
      // check if all fields is not empty 
      if(username.val() === '' || password.val() === '' || confirm.val() === '' || email.val() === '') { 
       ev.preventDefault(); // prevent form submit 
       alert('All fields are required.'); //alert message 
       //check if password and confirm password is equal 
      } else if(password.val() != confirm.val()){ 
       ev.preventDefault(); // prevent form submit 
       alert('password did not match.'); //alert message 
      } else { 
       return true; // submit form if validation has passed. 
      } 
     }); 
    } 
</script> 
Смежные вопросы