Question

我有一个简单的表格：

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

我想要做的是验证输入字段，如果一切正常，请将用户发送到使用输入值作为网址的一部分的新页面，而不是查询字符串值，例如＆＃34; / search /伦敦＆＃34 ;.如果验证失败，我想处理有关哪个字段不正确的信息。

我该怎么做？

Answer 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>

如果您使用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
  }
});

<强> OR

表单提交活动

$( "#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|false。

希望这会对你有所帮助。使用最符合您要求的活动。

Answer 2

验证表单，执行表单操作并附加输入值

<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>

Answer 3

这是一个非常基本的例子，你可能需要改变一些东西，但它有效。

<强> 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?filename=tryjs_validation_js

此功能检查用户是否将输入字段留空。

Answer 4

使用喜欢

<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>

Answer 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");

});

希望这会有所帮助。

Answer 6

为提交按钮和输入字段分配ID。然后，您应该使用JavaScript取消按钮单击时的提交事件，并验证捕获的数据，但是您希望并向用户显示哪些字段无效。

这应该足以让你入门。

以下是一个示例JavaScript函数，您可以根据自己的喜好进行修改，不要忘记在HTML文件中引用JQuery！

{{1}}

使用Jquery / Javascript在提交和重定向上验证表单的最佳实践

6 个答案: