带两个子按钮的必填字段，格式相同

Question

I set a required field for all the fields in form and having two submit button. and want the required data on only for one submitonly. In another submit i dont want required with form fields how to prevent the requied field in another submit button.

<form action="data.php">
name<input type="text" name="name" required>
std<input type="text" name="name" required>
class<input type="text" name="name" required>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="clear">
<input type="save" name="save" value="save">
</form>

in this given code the required field shoud alert only when i click on submit .and do not alert on click of save is it posible any way

Answer 1

You may consider catching submit events and doing different checks according to what button is pressed. Also please note that the required attribute will always make your input truly required. Here I used a custom attribute, that has no special property, but I would then use it to identify in my custom code what fields are required.

Here is how it would look like in Javascript using jQuery:

<form id="your_form" action="data.php">
name<input type="text" name="name" is_required>
std<input type="text" name="name">
class<input type="text" name="name" is_required>
    <br />
<input type="submit" name="submit2" value="submit">
</form>
<input type="submit" name="submit" value="submit with check">

---

var ok;
$('[name=submit]').on('click', function(e) {
    ok = true;
    $('[is_required]').each(function() {
       if (!$(this).val()) ok = false;
    });
    if (!ok) {
        alert("Please fill in all the required fields");
    } else
        $("#your_form").submit();
});

You may see this code in action here: http://jsfiddle.net/z9dkjdtz/

Answer 2

Use the formnovalidate attribute in a button to specify that normal HTML5 form validation (such as checking that all required fields have value) be suppressed:

<input type="submit" name="save" value="save" formnovalidate>

Note: type="save" is invalid and gets ignored, so the the element would create a text input box (since type="text" is the default).