2

私はかなり大きなフォームを持っていて、本を入力するための8つのフィールドがあります。これで、ユーザーがさらに本を追加するためのボタンがあり、クリックするとjavascript関数が呼び出され、8つのフィールドのうち7つが複製されます。

ユーザーは最大6冊の本を追加でき、動的に作成されたすべての入力フィールドには、配列として名前が付けられます。それらを投稿してテーブルに保存することができます。今度はjavascriptを使用してそれらを検証したいと思います。

私は1週間からこれをやろうとしていて、Javascriptは初めてです。私を助けてください。

私のJavaScriptコード

function addInput(divName){
 var bname1 = new Array();
 var abname1 = new Array();
 var cost1 = new Array();
 var num1 = new Array();

 if (counter == limit) 
 {
      alert("You have reached the limit of adding " + counter + " inputs");
 }
 else 
 {  
     var newdiv = document.createElement('div');
      newdiv.innerHTML ="<table>"+ "<tr align='right'>" + "<td>"+ " Name of book" +  (counter + 1) + "  " +" : <input type='text' name='bname1[]' > "+"</td>" + "</tr>"+"<tr align='right'>"+ "<td>"+" Name of Authour"+(counter + 1)+" "+": <input type='text' name='aname1[]'>"+"</td>"+"</tr>"+"<tr align='right'>"+"<td>"+"Publisher"+(counter+1)+" "+": <input tyme='text' name='pub1[]'>"+"</td>"+"</tr>"+ "<tr align='right'>" +"<td>"+ "ISDN Number " + (counter + 1) +" "+ ": <input type='text' name='isdn1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" +"<td>"+ " Edition " + (counter + 1) + " "+": <input type='text' name='edi1[]'> "+"</td>" + "</tr>"+"<tr align='right'>" + "<td>"+ "Price"+(counter + 1) +" "+ " :<input type='number' name='cost1[]'>"+"</td>"+"</tr>"+"<tr align='right'>" + "<td>"+ "Number of copies"+(counter + 1) +" "+ ": <input type='number' name ='num1[]'> "+"</td>" + "</tr>"+ "</table>";

    //  alert("counter +1 is "+counter+1);

      document.getElementById(divName).appendChild(newdiv);
     counter=counter+1;



 }
}

これがすべて追加されるhtmlフォームにdivsionがあります。助けてください ！事前に感謝します..

4

4 に答える 4

0

Couple of suggestions for you to consider: 1) consider grouping ALL the fields you want to duplicate inside a single div in your form. Then when the user wants to add new item (book) all you will need to do will be copy the content of this div. This way you will maintain only one copy of field-set. 2) consider dynamic generic form validation too. You add the validation rules to your form field definition with extra attributes i.e. [<input ... validationRules="mandatory,minimumLength=10..." />] I think that you can achieve something similar with JQuery, but I personally prefer NOT to use large libraries to do small jobs. 3) consider giving your fields unique ids too.

于 2012-07-04T09:00:58.923 に答える
0

検証関数の例:

function validate_field(f) { // f is input element
    var name = f.name; // or also f.getAttribute('name')
    var value = f.value; // or also f.getAttribute('value'), but should be defined
    var error_div = document.getElementById(name+'err');
    //alert('name '+name+' value '+value);
    if (name.indexOf('bname') == 0) { // if validate book name
        if (value == '') { // e.g. book name should not be empty string?
            error_div.innerHTML = 'book name cannot be empty!';
            return false;  // field is wrong
        }
    }
    else if (name.indexOf('aname') == 0) { // if validate author name
        if (value.length<2) {
            error_div.innerHTML = 'author\'s name is too short!';
            return false; // at least two characters long name? :)
        }
    }
    else if (name.indexOf('pub') == 0) { // if validate publisher
        if (value.length<2) {
            error_div.innerHTML = 'publisher\'s name is too short!';
            return false;
        }
    }
    else if (name.indexOf('isdn') == 0) { // if validate ISDN Number
        if (value == '') {
            error_div.innerHTML = 'ISDN cannot be empty!';
            return false;
        }
    }
    else if (name.indexOf('edi') == 0) { // if validate Edition
        if (value == '') {
            error_div.innerHTML = 'edition cannot be empty!';
            return false;
        }
    }
    else if (name.indexOf('cost') == 0) { // if validate Price
        if (value=='') {
            error_div.innerHTML = 'Cannot be empty!';
            return false;
        }
        if (isNaN(value)) {
            error_div.innerHTML = 'Please write a price using digits!';
            return false;
        }
    }
    else if (name.indexOf('num') == 0) { // if validate Number of copies
        if (value=='') {
            error_div.innerHTML = 'Cannot be empty!';
            return false;
        }
        if (isNaN(value)) {
            error_div.innerHTML = 'Please number of copies via digits!';
            return false;
        }
    }
    error_div.innerHTML = 'ok';
    return true; // field is ok
    // you can also have a look at http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
}

完全な作業スクリプトはこちら: pastebin.com/UkVP2uLb

于 2012-07-04T12:50:23.820 に答える
0

使用する 

var bname= document.getElementsByName('bname1[]');
var aname=document.getElementsByName('aname1[]'); .........

for(var i=0;i<bname.length;i++)
{
  //Your validations
}
for(var i=0;i<aname.length;i++)
{
  //Your validations
}.....

..コード内のすべての要素に対してこれを行います..

于 2012-07-04T10:05:01.780 に答える
0

ここにあなたの解決策があります。http://codebins.com/codes/home/4ldqpbq

HTML

<div id="testDiv">
</div>

<button onclick="addInput('testDiv')">
  Add New Items
</button>
<button onclick="validate('testDiv')">
  Validate
</button>

JavaScript

var counter = 0;
var limit = 6

function addInput(divName) {
    var bname1 = new Array();
    var abname1 = new Array();
    var cost1 = new Array();
    var num1 = new Array();

    if (counter == limit) {
        alert("You have reached the limit of adding " + counter + " inputs");
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<table>" + "<tr align='right'>" + "<td>" + " Name of book" + (counter + 1) + "  " + " : <input type='text' name='bname1[]' > " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Name of Authour" + (counter + 1) + " " + ": <input type='text' name='aname1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Publisher" + (counter + 1) + " " + ": <input tyme='text' name='pub1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "ISDN Number " + (counter + 1) + " " + ": <input type='text' name='isdn1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + " Edition " + (counter + 1) + " " + ": <input type='text' name='edi1[]'> " + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Price" + (counter + 1) + " " + " :<input type='number' name='cost1[]'>" + "</td>" + "</tr>" + "<tr align='right'>" + "<td>" + "Number of copies" + (counter + 1) + " " + ": <input type='number' name ='num1[]'> " + "</td>" + "</tr>" + "</table>";

        //  alert("counter +1 is "+counter+1);
        document.getElementById(divName).appendChild(newdiv);
        counter = counter + 1;



    }
}


    function validate(divName) {
        var container = document.getElementById(divName).getElementsByTagName("input");

        for (var len = container.length, i = 0; i < len; i++) {
            // if only requried validation
            if (container[i].value == "") {
                container[i].style.borderColor = "red"
            } else {
                container[i].style.border = ""
            }


            //if you want saperate validation for each
            switch (container[i].name) {
            case "bname1[]":
                //validate according to filed
                break;
            case "aname1[]":
                //validate according to filed
                break;
            case "pub1[]":
                //validate according to filed
                break;
            case "isdn1[]":
                //validate according to filed
                break;
            case "edi1[]":
                //validate according to filed
                break;
            case "cost1[]":
                //validate according to filed
                break;
            case "num1[]":
                //validate according to filed
                break;
            }

        }

    }
于 2012-07-04T08:53:05.607 に答える