HTML/Javascript: простая проверка формы для отправки

Ответ 1

У вас есть несколько ошибок. сначала вам нужно вернуть значение из функции в разметке html: <form name="ff1" method="post" onsubmit="return validateForm();">

второй в jsfiddle вашего места код внутри onLoad, который затем форма не распознает - и в конце вы должны вернуть true из функции, если весь успех проверки - Я исправил некоторые проблемы в обновлении:

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

Ответ 2

Простейшая проверка заключается в следующем:

<form name="ff1" method="post">
  <input type="email" name="email" id="fremail" placeholder="[email protected]" />
  <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>

Ответ 3

Вам нужно вернуть функцию проверки. Что-то вроде:

onsubmit="return validateForm();"

Затем проверяющая функция должна возвращать false при ошибках. Если все в порядке, верните true. Помните, что сервер также должен проверять.

Ответ 4

Раскрытие: я написал FieldVal.

Вот решение, использующее FieldVal. Используя FieldVal UI для построения формы, а затем FieldVal для проверки ввода, вы можете передать ошибку прямо в форму.

Вы даже можете запустить код проверки на бэкэнд (если вы используете Node) и показать ошибку в форме, не проводя вручную все поля.

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": "[email protected]",
        "title": "Your Title",
        "url": "http://www.example.com"
    })
});

Ответ 5

Проверка формы элемента HTML
Функция запуска

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

Перейдите к примеру и скачайте https://github.com/naimserin/Validation

Ответ 6

Я использую эту очень маленькую библиотеку JavaScript для проверки полной формы в одной строке кода:

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

Отметьте здесь: jsFormValidator

Преимущество этого инструмента заключается в том, что вы просто пишете объект JSON, который описывает ваши правила проверки, не нужно ставить строку как:

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

data-validate вводится во все поля ввода вашей формы, но при использовании jsFormValidator вы не требуете этого сильного синтаксиса, и проверка будет применена к вашей форме одним выстрелом, без необходимости касаться вашего HTML-кода.