HTML/Javascript: Xác thực biểu mẫu đơn giản khi gửi

Question

Tôi đang cố gắng xác thực biểu mẫu của mình một cách dễ dàng nhất có thể, nhưng bằng cách nào đó không hoạt động và khi tôi nhấp gửi, nó chỉ đưa tôi đến trang tiếp theo mà không đưa ra thông báo cảnh báo:

HTML:

<form name="ff1" method="post" onsubmit="validateForm();"> 
<input type="text" name="email" id="fremail" placeholder="your@email.com" /> 
<input type="text" name="title" id="frtitle" placeholder="Title" /> 
<input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" /> 
<input type="submit" name="Submit" value="Continue" />   
</form> 

Javascript:

<script type="text/JavaScript"> 

function validateURL(url) { 
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/; 
    return re.test(url); 
} 

function validateForm() 
{ 
    // Validate URL 
    var url = $("#frurl").val(); 
    if (validateURL(url)) { } else { 
     alert("Please enter a valid URL, remember including http://"); 
    } 

    // Validate Title 
    var title = $("#frtitle").val(); 
    if (title=="" || title==null) { } else { 
     alert("Please enter only alphanumeric values for your advertisement title"); 
    } 

    // Validate Email 
    var email = $("#fremail").val(); 
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else { 
     alert("Please enter a valid email"); 
    } 
    return false; 
} 
</script> 

đây cũng là trong jsfiddle http://jsfiddle.net/CrLsR/

Cảm ơn trước

Answer 1

Bạn có một số lỗi ở đó. trước tiên, bạn phải trả về giá trị từ hàm trong đánh dấu html: <form name="ff1" method="post" onsubmit="return validateForm();">

giây trong jsfiddle nơi mã của bạn bên trong onLoad sau đó biểu mẫu sẽ không nhận ra - và cuối cùng bạn phải trả về true từ hàm nếu tất cả xác nhận thành công - tôi cố định một số vấn đề trong bản cập nhật:

https://jsfiddle.net/mj68cq0b/

function validateURL(url) { 
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/; 
    return reurl.test(url); 
} 

function validateForm() 
{ 
    // Validate URL 
    var url = $("#frurl").val(); 
    if (validateURL(url)) { } else { 
     alert("Please enter a valid URL, remember including http://"); 
     return false; 
    } 

    // Validate Title 
    var title = $("#frtitle").val(); 
    if (title=="" || title==null) { 
     alert("Please enter only alphanumeric values for your advertisement title"); 
     return false; 
    } 

    // Validate Email 
    var email = $("#fremail").val(); 
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else { 
     alert("Please enter a valid email"); 
     return false; 
    } 
    return true; 
} 

Answer 2

Bạn cần trả lại hàm xác thực. Một cái gì đó như:

onsubmit="return validateForm();" 

Sau đó, hàm xác thực sẽ trả về lỗi sai. Nếu tất cả mọi thứ là OK trở lại đúng sự thật. Hãy nhớ rằng máy chủ cũng phải xác thực.

Answer 3

các xác nhận đơn giản nhất là như sau:

<form name="ff1" method="post"> 
 
    <input type="email" name="email" id="fremail" placeholder="your@email.com" /> 
 
    <input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" /> 
 
    <input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" /> 
 
    <input type="submit" name="Submit" value="Continue" />   
 
</form>

Nó sử dụng HTML5 Attributes (giống như pattern)

javascript: none.

Answer 4

Tiết lộ: Tôi đã viết FieldVal.

Đây là giải pháp sử dụng FieldVal. Bằng cách sử dụng giao diện người dùng FieldVal để tạo biểu mẫu và sau đó FieldVal xác thực đầu vào, bạn có thể chuyển lỗi thẳng trở lại biểu mẫu.

Bạn thậm chí có thể chạy mã xác nhận trên chương trình phụ trợ (nếu bạn đang sử dụng nút) và hiển thị lỗi trong biểu mẫu mà không cần phải nối dây tất cả các trường theo cách thủ công.

Live Demo: http://codepen.io/MarcusLongmuir/pen/WbOydx

function validate_form(data) { 
    //This would work on the back end too (if you're using Node) 

    //Validate the provided data 
    var validator = new FieldVal(data); 
    validator.get("email", BasicVal.email(true)); 
    validator.get("title", BasicVal.string(true)); 
    validator.get("url", BasicVal.url(true)); 
    return validator.end(); 
} 


$(document).ready(function(){ 

    //Create a form and add some fields 
    var form = new FVForm() 
    .add_field("email", new FVTextField("Email")) 
    .add_field("title", new FVTextField("Title")) 
    .add_field("url", new FVTextField("URL")) 
    .on_submit(function(value){ 

     //Clear the existing errors 
     form.clear_errors(); 

     //Use the function above to validate the input 
     var error = validate_form(value); 

     if (error) { 
      //Pass the error into the form 
      form.error(error); 
     } else { 
      //Use the data here 
      alert(JSON.stringify(value)); 
     } 
    }) 

    form.element.append(
     $("<button/>").text("Submit") 
    ).appendTo("body"); 

    //Pre-populate the form 
    form.val({ 
     "email": "user@example.com", 
     "title": "Your Title", 
     "url": "http://www.example.com" 
    }) 
}); 

Answer 5

HTML Form tử Validation
Chạy Chức năng

<script> 
      $("#validationForm").validation({ 
       button: "#btnGonder", 
       onSubmit: function() { 
        alert("Submit Process"); 
       }, 
       onCompleted: function() { 
        alert("onCompleted"); 
       }, 
       onError: function() { 
        alert("Error Process"); 
       } 
      }); 
</script> 

Đến dụ và tải https://github.com/naimserin/Validation

Answer 6

tôi sử dụng thư viện JavaScript nhỏ thực sự đơn giản này để xác thực một biểu mẫu đầy đủ trong một dòng mã:

jsFormValidator.App.create().Validator.applyRules('Login'); 

Kiểm tra ở đây: jsFormValidator

Lợi ích của công cụ này là bạn chỉ cần viết một đối tượng phù thủy JSON mô tả quy tắc xác nhận của bạn, không cần phải đưa dòng như:

<input type=text name="username" data-validate placeholder="Username"> 

đĩa dữ liệu xác nhận được tiêm vào tất cả các trường đầu vào của biểu mẫu của bạn nhưng khi sử dụng jsFormValidator, bạn không cần cú pháp nặng này và xác thực sẽ được áp dụng cho biểu mẫu của bạn trong một lần chụp mà không cần phải chạm vào mã HTML của bạn.