CODEWITHSUNDEEP
javascriptformsvalidation
user3221295
user3221295

Reputation:

Form onsubmit="return validate()" issue

I am new to this site, and I wasn't able to find an answer (I honestly gave it my best shot).

I have a form that I would like to validate before it completes its action. My knowledge of PHP is very limited, so hopefully you can help me figure out a JavaScript solution.

Here is an example of what I have so far:

<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>

<script type="text/javascript">
// FAIL IF NOT A NUMBER
function validate()
    {
    if (a.value == isNaN)
    {
    return false;
    }
    if (b.value == isNaN)
    {
    return false;
    }
    if (c.value == isNaN)
    {
    return false;
    }
    return true;
    }
</script>

<form name="form1" action="#" onsubmit="return validate()" method="post">
<input type="text" name="a">
<input type="text" name="b">
<input type="text" name="c">
<input class="button" type="submit" value="Submit">
</form>

</body>
</html>

Upvotes: 0

Views: 12367

Answers (3)

PROGATI School Management Syst
PROGATI School Management Syst

Reputation: 7

    HTML CODE : 

<!-- createNewAbout is my module name and submitAboutContent is the Controller You you can call it the backend function . 
You Can Use URL in Form Action too.  -->
    <form action="createNewAbout/submitAboutContent" method="post" enctype="multipart/form-data" onSubmit="return validationOnlySubmitForm('submitStaffData', new Array('subject','details'))">
<!--  I am Calling a function before submit if this function returns true then only the data will be Submit . -->
    <div class="form-group col-md-12">
<!--   there are simple form -->
    <label for="title">Enter Title</label>
    <input type="text" class="form-control" placeholder="Enter Title" id="subject" name="subject">
    </div>
    <div class="form-group col-md-12">
    <label for="title">Enter Description</label>
    <textarea type="text" class="form-control" placeholder="Enter Description" id="details" name="details"></textarea>
    </div>
    <div class="form-group col-md-12">
    <label for="title">Add Image</label>
    <input type="file" id="file" name="file" style="padding: 5px;font-size: 15px;width: 100px;">
    </div>
    <div class="col-md-12 mrg15px ">
    <button class="btn btn-primary center-block" type="submit">Submit</button>
    </div>
    </form>


<!-- this is the function Which i am Calling . I am taking value of  name attribute of button to disable button for multiple fuction call and also taking an array of values of name attribute of  manditory fields. Here we cant use values of ID attribute so we have to use name . -->
    <script> 
    function validationOnlySubmitForm(button_name="", arr="") {
    var fields = arr, flag  = 0;
    document.getElementsByName(button_name)[0].setAttribute("disabled" , true);
    for (var i = 0 ; i <= fields.length - 1 ; i++) {
    if (document.getElementsByName(fields[i])[0].value.length == 0) {
    flag = 1;
    document.getElementsByName(fields[i])[0].focus();
    alert(fields[i] + " is manditory.");
    document.getElementsByName(button_name)[0].removeAttribute("disabled");
    return false;
    }
    }

    if (flag == 0)
    return true;
    }

    </script>

Upvotes: 0

Jack
Jack

Reputation: 1941

Give this a try @Scott

function validate() {
    a = document.getElementsByName("a")[0].value;
    b = document.getElementsByName("b")[0].value;
    c = document.getElementsByName("c")[0].value;

    if (isNaN(a[0].value) && a!="") {
        return false;
    }

    if (isNaN(a[0].value) && b!="") {
        return false;
    }

    if (isNaN(a[0].value) && c!="") {
        return false;
    }

    return true;
}

<form name="form1" action="" onsubmit="validate()" method="post">
    <input type="text" name="a">
    <input type="text" name="b">
    <input type="text" name="c">
    <input class="button" type="submit" value="Submit">
</form>

Upvotes: 1

zickno
zickno

Reputation: 115

You can call the function in the button 

<button onclick="validate()" type="submit">Submit</button>
<input type="text" id="a" name="a">

and catch the value like this

<script type="text/javascript">
// FAIL IF NOT A NUMBER
function validate()
    {
    var a = document.getElementById("a").value; // or getElementByName
    var b = document.getElementById("b").value;
    var c = document.getElementById("c").value;
    var d = document.getElementById("d").value;
    if (a.match(/[a-zA-Z]))
    {
    return false;
    }
    if (b.value == isNaN)
    {
    return false;
    }
    if (c.value == isNaN)
    {
    return false;
    }
    return true;
    }
</script>

Upvotes: 0

Related Questions