找到你要的答案

Q:Best practice to validate a form on submit and redirect with Jquery/Javascript [closed]

Q:最佳实践验证形式提交和重定向/ [关闭] JavaScript jQuery

I have a simple form:

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit">Submit</button>            
  </form>

What I want to do is to validate the input field and if everything is ok send the user to a new page that is using the input value as part of the url, not a querystring value, eg "/search/London". If validation fails I would like to handle the information about what field is not correct.

How should I do this?

我有一个简单的形式:

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit">Submit</button>            
  </form>

我要做的是验证输入的领域,如果一切正常用户发送到一个新的页面,使用输入的值作为URL的一部分,而不是一个字符串值,如“/搜索/伦敦”。如果验证失败,我想处理有关字段不正确的信息。

我该怎么做?

answer1: 回答1:

HTML

<form id="search-form" method="get" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit" id="search">Submit</button>            
  </form>

If you are using jQuery then bind submit button click event and handle your requirements:

Button click event:

$( "#search" ).click(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $('#search-form').attr('action', 'search/' + inputVal);
    $("#search-form").submit();
  } else {
     // Show error message to user
  }
});

OR

Form Submit event

$( "#search-form" ).submit(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $(this).attr('action', 'search/' + inputVal);
    $(this).submit();
  } else {
     // Show error message to user
  }
});

NOTE: Define vaildateUserInput() function which will return true|false after validate.

Hope this will helps you. Use the event which best for your requirements.

HTML

<form id="search-form" method="get" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit" id="search">Submit</button>            
  </form>

如果您使用的是jQuery结合提交按钮点击事件和处理您的要求:

按钮点击事件:

$( "#search" ).click(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $('#search-form').attr('action', 'search/' + inputVal);
    $("#search-form").submit();
  } else {
     // Show error message to user
  }
});

表单提交事件

$( "#search-form" ).submit(function(event) {
  event.preventDefault();
  var inputVal = $('#search-form-location').val();
  if(vaildateUserInput(inputVal)) {
    $(this).attr('action', 'search/' + inputVal);
    $(this).submit();
  } else {
     // Show error message to user
  }
});

注:定义vaildateuserinput()函数将验证后返回true |假。

希望这对你有帮助。使用最适合您要求的事件。

answer2: 回答2:

Validate the form,take the form action and append the input value like so

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="button" id="submit_form">Submit</button>            
  </form>
<script>
$("#search-form").on('submit', function(e) { 
    e.preventDefault();
    var input_val = $("#search-form-location").val();
    if(input_val != null) { 
       window.location.href = "yourpath/"+input_val;
    } else {
      //do what ever you want
    }
});
</script>

验证表单,采取表单操作并附加输入值

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="button" id="submit_form">Submit</button>            
  </form>
<script>
$("#search-form").on('submit', function(e) { 
    e.preventDefault();
    var input_val = $("#search-form-location").val();
    if(input_val != null) { 
       window.location.href = "yourpath/"+input_val;
    } else {
      //do what ever you want
    }
});
</script>
answer3: 回答3:

This is a very basic example you might have to change stuff around but it works.

HTML:

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

Name: <input type="text" name="fname">
<input type="submit" value="Submit">

</form>

JavaScript:

function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
    alert("Name must be filled out");
    return false;
}
}

See live example here: http://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_js

This function checks whether the user left the input field empty.

这是一个非常基本的例子,你可能要改变周围的东西,但它的作品。

HTML:

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

Name: <input type="text" name="fname">
<input type="submit" value="Submit">

</form>

JavaScript:

function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
    alert("Name must be filled out");
    return false;
}
}

看到活生生的例子:http://www.w3schools.com/js/tryit.asp?文件名= tryjs_validation_js

此函数检查用户是否将输入字段留空。

answer4: 回答4:

Use Like

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="button" onclick="validateAndSubmit()">Submit</button>            
  </form>
<script>
function validateAndSubmit(){
var form=document.getElementById('search-form');
if(document.getelementById('search-form-location')!="")
    form.submit();
else 
   alert("location may not be empty")
</script>

使用像

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="button" onclick="validateAndSubmit()">Submit</button>            
  </form>
<script>
function validateAndSubmit(){
var form=document.getElementById('search-form');
if(document.getelementById('search-form-location')!="")
    form.submit();
else 
   alert("location may not be empty")
</script>
answer5: 回答5:
<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit" id="btnSubmit">Submit</button>            
  </form>

$('#btnSubmit').click(function() {
  if(  $('#search-form-location').val() != '')
        window.location.replace("url");

});

Hope this will help.

<form id="search-form" >
       <input type="text" name="location" id="search-form-location" value="London">
       <button type="submit" id="btnSubmit">Submit</button>            
  </form>

$('#btnSubmit').click(function() {
  if(  $('#search-form-location').val() != '')
        window.location.replace("url");

});

希望这将有助于。

answer6: 回答6:

Assign an ID to your submit button and input field. You should then use JavaScript to cancel the submit event on button click and validate the captured data however you would like to and display to the user which fields are not valid.

This should be enough to get you started.

Here is an example JavaScript function that you can modify to your liking, don't forget to reference JQuery in your HTML file!

$("#your_submit_button_id_here").click(function()
{
    event.preventDefault();
    if($("#some_input_field_id").val().length === 0)
    {
       console.log("The length of the input field is not zero");

       // after all validation is done redirect them to another page
       window.location.replace("http://stackoverflow.com");

    }
});

给你的提交按钮和输入字段分配一个ID。然后你应该使用JavaScript来取消提交事件按钮点击验证捕获的数据,但是你想要显示的字段是无效的用户。

这应该足以让你开始。

下面的例子是一个JavaScript函数,你可以修改你喜欢的,别忘了在你的HTML文件引用jQuery!

$("#your_submit_button_id_here").click(function()
{
    event.preventDefault();
    if($("#some_input_field_id").val().length === 0)
    {
       console.log("The length of the input field is not zero");

       // after all validation is done redirect them to another page
       window.location.replace("http://stackoverflow.com");

    }
});
javascript  jquery  html5  forms  validation